diff --git a/assets/js/template.js b/assets/js/template.js
index e654c3b0..465b8a43 100644
--- a/assets/js/template.js
+++ b/assets/js/template.js
@@ -1,7 +1,7 @@
 window._config = {
   isDebug: location.hash.slice(1) === 'is-debug' ||
     ['localhost', '127.0.0.1', 'dev.bootstrap-table.com'].indexOf(location.hostname) > -1,
-  cdnUrl: 'https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.6/dist/',
+  cdnUrl: 'https://cdn.jsdelivr.net/npm/bootstrap-table@1.23.0/dist/',
   localUrl: '../bootstrap-table/src/',
   testUrl: '/src/'
 }
diff --git a/crud/index.html b/crud/index.html
index f2df8b1e..8ff8f6b6 100644
--- a/crud/index.html
+++ b/crud/index.html
@@ -5,7 +5,7 @@
   <meta charset="utf-8">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.6/dist/bootstrap-table.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-table@1.23.0/dist/bootstrap-table.min.css">
   <style>
     .mr10 { margin-right: 10px; }
     .alert {
@@ -17,7 +17,7 @@
   <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.6/dist/bootstrap-table.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.23.0/dist/bootstrap-table.min.js"></script>
 </head>
 <body>
   <div class="container">
diff --git a/options/table-locale.html b/options/table-locale.html
index 82968910..65599b8b 100644
--- a/options/table-locale.html
+++ b/options/table-locale.html
@@ -5,7 +5,7 @@
     links: ['bootstrap-table.min.css'],
     scripts: [
       'bootstrap-table.min.js',
-      'https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.6/dist/bootstrap-table-locale-all.min.js'
+      'https://cdn.jsdelivr.net/npm/bootstrap-table@1.23.0/dist/bootstrap-table-locale-all.min.js'
     ]
   })
 </script>
diff --git a/package.json b/package.json
index d0a5f95a..fd067583 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bootstrap-table-examples",
-  "version": "1.22.6",
+  "version": "1.23.0",
   "description": "bootstrap-table-examples",
   "repository": {
     "type": "git",
diff --git a/vue-starter/.eslintrc.cjs b/vue-starter/.eslintrc.cjs
new file mode 100644
index 00000000..f43094a2
--- /dev/null
+++ b/vue-starter/.eslintrc.cjs
@@ -0,0 +1,13 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:vue/vue3-recommended'
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  }
+}
diff --git a/vue-starter/README.md b/vue-starter/README.md
index 0bf916a0..5b65d1d2 100644
--- a/vue-starter/README.md
+++ b/vue-starter/README.md
@@ -1,36 +1,21 @@
 # vue-starter
 
-## Create
-
-```
-vue create vue-starter
-yarn add jquery bootstrap popper.js bootstrap-table
-```
-
 ## Project setup
 ```
-yarn install
+yarn
 ```
 
 ### Compiles and hot-reloads for development
 ```
-yarn run serve
+yarn serve
 ```
 
 ### Compiles and minifies for production
 ```
-yarn run build
-```
-
-### Run your tests
-```
-yarn run test
+yarn build
 ```
 
 ### Lints and fixes files
 ```
-yarn run lint
+yarn lint
 ```
-
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
diff --git a/vue-starter/babel.config.js b/vue-starter/babel.config.js
deleted file mode 100644
index ba179669..00000000
--- a/vue-starter/babel.config.js
+++ /dev/null
@@ -1,5 +0,0 @@
-module.exports = {
-  presets: [
-    '@vue/app'
-  ]
-}
diff --git a/vue-starter/index.html b/vue-starter/index.html
new file mode 100644
index 00000000..4f5624a0
--- /dev/null
+++ b/vue-starter/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="logo.png">
+    <title>vue-starter</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/vue-starter/package.json b/vue-starter/package.json
index fe8f3cde..c32e24b9 100644
--- a/vue-starter/package.json
+++ b/vue-starter/package.json
@@ -1,52 +1,25 @@
 {
   "name": "vue-starter",
-  "version": "0.1.0",
-  "private": true,
+  "version": "2.0.0",
+  "type": "module",
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "serve": "vite",
+    "build": "vite build",
+    "lint": "eslint ."
   },
   "dependencies": {
-    "bootstrap": "^4.5.0",
-    "bootstrap-table": "^1.22.6",
-    "bootstrap-vue": "^2.15.0",
-    "core-js": "^3.6.5",
-    "jquery": "^3.5.1",
-    "popper.js": "^1.16.1",
-    "tableexport.jquery.plugin": "^1.10.20",
-    "vue": "^2.6.11"
+    "@popperjs/core": "^2.11.8",
+    "bootstrap": "^5.3.3",
+    "bootstrap-icons": "^1.11.3",
+    "bootstrap-table": "^1.23.0",
+    "jquery": "^3.7.1",
+    "tableexport.jquery.plugin": "^1.30.0",
+    "vue": "^3.4.27"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.4.4",
-    "@vue/cli-plugin-eslint": "^4.4.4",
-    "@vue/cli-service": "^4.4.4",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^7.3.0",
-    "eslint-plugin-vue": "^6.2.2",
-    "vue-template-compiler": "^2.6.11"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended"
-    ],
-    "rules": {},
-    "parserOptions": {
-      "parser": "babel-eslint"
-    }
-  },
-  "postcss": {
-    "plugins": {
-      "autoprefixer": {}
-    }
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions"
-  ]
+    "@vitejs/plugin-vue": "^5.0.4",
+    "eslint": "^8.57.0",
+    "eslint-plugin-vue": "^9.26.0",
+    "vite": "^5.2.11"
+  }
 }
diff --git a/vue-starter/public/index.html b/vue-starter/public/index.html
deleted file mode 100644
index 48bd56b2..00000000
--- a/vue-starter/public/index.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>logo.png">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css">
-    <title>vue-starter</title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but vue-starter doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>
diff --git a/vue-starter/src/App.vue b/vue-starter/src/App.vue
index bb8ad950..63a8ca31 100644
--- a/vue-starter/src/App.vue
+++ b/vue-starter/src/App.vue
@@ -1,19 +1,16 @@
 <template>
   <div id="app">
-    <img alt="Bootstrap Table logo" src="./assets/logo.png" width="64" height="64">
-    <HelloWorld msg="Welcome to Bootstrap Table App"/>
+    <img
+      src="./assets/logo.png"
+      width="64"
+      height="64"
+    >
+    <HelloTable />
   </div>
 </template>
 
-<script>
-import HelloWorld from './components/HelloWorld.vue'
-
-export default {
-  name: 'app',
-  components: {
-    HelloWorld
-  }
-}
+<script setup>
+import HelloTable from './components/HelloTable.vue'
 </script>
 
 <style>
diff --git a/vue-starter/src/components/HelloTable.vue b/vue-starter/src/components/HelloTable.vue
new file mode 100644
index 00000000..7bc2d92d
--- /dev/null
+++ b/vue-starter/src/components/HelloTable.vue
@@ -0,0 +1,81 @@
+<template>
+  <div>
+    <BootstrapTable
+      ref="table"
+      :columns="columns"
+      :data="data"
+      :options="options"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const columns = [
+  {
+    field: 'state',
+    checkbox: true
+  },
+  {
+    title: 'Item ID',
+    field: 'id'
+  },
+  {
+    field: 'name',
+    title: 'Item Name'
+  },
+  {
+    field: 'price',
+    title: 'Item Price'
+  },
+  {
+    field: 'actions',
+    title: 'Actions',
+    align: 'center',
+    formatter: () => '<button class="btn btn-primary">Click</button>',
+    events: {
+      'click .btn-primary': (e, index, row) => {
+        alert(JSON.stringify(row))
+      }
+    }
+  }
+]
+
+const data = ref({
+  total: 5,
+  rows: [
+    {
+      id: 1,
+      name: 'Item 1',
+      price: '$1'
+    },
+    {
+      id: 2,
+      name: 'Item 2',
+      price: '$2'
+    },
+    {
+      id: 3,
+      name: 'Item 3',
+      price: '$3'
+    },
+    {
+      id: 4,
+      name: 'Item 4',
+      price: '$4'
+    },
+    {
+      id: 5,
+      name: 'Item 5',
+      price: '$5'
+    }
+  ]
+})
+
+const options = ref({
+  search: true,
+  showColumns: true,
+  showExport: true
+})
+</script>
diff --git a/vue-starter/src/components/HelloWorld.vue b/vue-starter/src/components/HelloWorld.vue
deleted file mode 100644
index 0e27f5ac..00000000
--- a/vue-starter/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-<template>
-  <div>
-    <BootstrapTable
-      ref="table"
-      :columns="columns"
-      :data="data"
-      :options="options"
-      @on-post-body="vueFormatterPostBody"
-    />
-  </div>
-</template>
-
-<script>
-import tableMixin from '../mixins/table'
-
-export default {
-  mixins: [tableMixin],
-  data () {
-    return {
-      columns: [
-        {
-          field: 'state',
-          checkbox: true
-        },
-        {
-          title: 'Item ID',
-          field: 'id'
-        },
-        {
-          field: 'name',
-          title: 'Item Name'
-        },
-        {
-          field: 'price',
-          title: 'Item Price'
-        },
-        {
-          field: 'actions',
-          title: 'Actions',
-          align: 'center',
-          formatter: (value, row) => {
-            return this.vueFormatter({
-              template: '<b-button @click="clickRow(row)">Click</b-button>',
-              data: { row },
-              methods: {
-                clickRow: this.clickRow
-              }
-            })
-          }
-        }
-      ],
-      data: {
-        total: 5,
-        rows: [
-          {
-            id: 1,
-            name: 'Item 1',
-            price: '$1'
-          },
-          {
-            id: 2,
-            name: 'Item 2',
-            price: '$2'
-          },
-          {
-            id: 3,
-            name: 'Item 3',
-            price: '$3'
-          },
-          {
-            id: 4,
-            name: 'Item 4',
-            price: '$4'
-          },
-          {
-            id: 5,
-            name: 'Item 5',
-            price: '$5'
-          }
-        ]
-      },
-      options: {
-        search: true,
-        showColumns: true,
-        showExport: true
-      }
-    }
-  },
-  methods: {
-    clickRow (row) {
-      alert(JSON.stringify(row))
-    }
-  }
-}
-</script>
diff --git a/vue-starter/src/main.js b/vue-starter/src/main.js
index cea11459..27cff257 100644
--- a/vue-starter/src/main.js
+++ b/vue-starter/src/main.js
@@ -1,13 +1,10 @@
-import Vue from 'vue'
-import BootstrapVue from 'bootstrap-vue'
+import { createApp } from 'vue'
 import App from './App.vue'
 
-Vue.use(BootstrapVue)
+import './plugins/table'
+import BootstrapTable from 'bootstrap-table/dist/bootstrap-table-vue'
 
-import './plugins/table.js'
+const app = createApp(App)
 
-Vue.config.productionTip = false
-
-new Vue({
-  render: h => h(App),
-}).$mount('#app')
+app.component('BootstrapTable', BootstrapTable)
+app.mount('#app')
diff --git a/vue-starter/src/mixins/table.js b/vue-starter/src/mixins/table.js
deleted file mode 100644
index 4baba083..00000000
--- a/vue-starter/src/mixins/table.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import Vue from 'vue'
-
-export default {
-  data () {
-    return {
-      vueFormatters: []
-    }
-  },
-
-  methods: {
-    vueFormatter (obj) {
-      const key = `_vue_formatter_${this.vueFormatters.length}`
-      this.vueFormatters.push({
-        el: `.${key}`,
-        name: key,
-        ...obj
-      })
-      return `<div class="${key}"></div>`
-    },
-
-    vueFormatterPostBody () {
-      if (!this.vueFormatters.length) {
-        return
-      }
-
-      for (let i = this.vueFormatters.length - 1; i >= 0; i--) {
-        const formatter = this.vueFormatters[i]
-
-        if (document.getElementsByClassName(formatter.name)) {
-          new Vue(formatter)
-          this.vueFormatters.splice(i, 1)
-        }
-      }
-    }
-  }
-}
diff --git a/vue-starter/src/plugins/table.js b/vue-starter/src/plugins/table.js
index ec1effc0..fa88a31d 100644
--- a/vue-starter/src/plugins/table.js
+++ b/vue-starter/src/plugins/table.js
@@ -1,14 +1,11 @@
 import 'bootstrap/dist/css/bootstrap.min.css'
-import 'bootstrap-vue/dist/bootstrap-vue.css'
+import 'bootstrap-icons/font/bootstrap-icons.min.css'
 import 'bootstrap-table/dist/bootstrap-table.min.css'
 
 import './jquery.js'
-import Vue from 'vue'
 import 'bootstrap'
 import 'tableexport.jquery.plugin/libs/FileSaver/FileSaver.min.js'
 import 'tableexport.jquery.plugin/tableExport.min.js'
-import 'bootstrap-table/dist/bootstrap-table'
-import BootstrapTable from 'bootstrap-table/dist/bootstrap-table-vue.esm'
-import 'bootstrap-table/dist/extensions/export/bootstrap-table-export'
 
-Vue.component('BootstrapTable', BootstrapTable)
+import 'bootstrap-table'
+import 'bootstrap-table/dist/extensions/export/bootstrap-table-export'
diff --git a/vue-starter/vite.config.js b/vue-starter/vite.config.js
new file mode 100644
index 00000000..92899032
--- /dev/null
+++ b/vue-starter/vite.config.js
@@ -0,0 +1,14 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  base: './',
+  plugins: [
+    vue()
+  ],
+  resolve: {
+    alias: {
+      vue: 'vue/dist/vue.esm-bundler.js'
+    }
+  }
+})
diff --git a/vue-starter/vue.config.js b/vue-starter/vue.config.js
deleted file mode 100644
index a8ace1e5..00000000
--- a/vue-starter/vue.config.js
+++ /dev/null
@@ -1,9 +0,0 @@
-module.exports = {
-  configureWebpack: {
-    resolve: {
-      alias: {
-        vue$: 'vue/dist/vue.esm.js'
-      }
-    }
-  }
-}
diff --git a/webpack-starter/package.json b/webpack-starter/package.json
index e2c37c96..2b6c90f9 100644
--- a/webpack-starter/package.json
+++ b/webpack-starter/package.json
@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "bootstrap": "^4.5.0",
-    "bootstrap-table": "^1.22.6",
+    "bootstrap-table": "^1.23.0",
     "jquery": "^3.5.1",
     "popper.js": "^1.16.1"
   },
diff --git a/welcome.html b/welcome.html
index e0c7b6cd..e6e32a3e 100644
--- a/welcome.html
+++ b/welcome.html
@@ -8,7 +8,7 @@
     scripts: [
       'https://cdn.jsdelivr.net/npm/tableexport.jquery.plugin@1.29.0/tableExport.min.js',
       'bootstrap-table.min.js',
-      'https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.6/dist/bootstrap-table-locale-all.min.js',
+      'https://cdn.jsdelivr.net/npm/bootstrap-table@1.23.0/dist/bootstrap-table-locale-all.min.js',
       'extensions/export/bootstrap-table-export.min.js'
     ]
   })
diff --git a/welcomes/vue-component.html b/welcomes/vue-component.html
index e78cea17..9aa89129 100644
--- a/welcomes/vue-component.html
+++ b/welcomes/vue-component.html
@@ -6,26 +6,23 @@
       'bootstrap-table.min.css'
     ],
     scripts: [
-      'https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.min.js',
+      'https://unpkg.com/vue@3/dist/vue.global.js',
       'bootstrap-table.min.js',
-      'https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.6/dist/bootstrap-table-vue.min.js'
+      'https://cdn.jsdelivr.net/npm/bootstrap-table@1.23.0/dist/bootstrap-table-vue.umd.js'
     ]
   })
 </script>
 
-<div id="table">
+<div id="app">
   <bootstrap-table :columns="columns" :data="data" :options="options"></bootstrap-table>
 </div>
 
 <script>
   function mounted() {
-    new Vue({
-      el: '#table',
-      components: {
-        'BootstrapTable': BootstrapTable
-      },
-      data: {
-        columns: [
+    const { createApp, ref } = Vue
+    const app = createApp({
+      setup () {
+        const columns = ref([
           {
             field: 'state',
             checkbox: true
@@ -46,17 +43,17 @@
             field: 'action',
             title: 'Actions',
             align: 'center',
-            formatter: function () {
+            formatter () {
               return '<a href="javascript:" class="like"><i class="fa fa-star"></i></a>'
             },
             events: {
-              'click .like': function (e, value, row) {
+              'click .like' (e, value, row) {
                 alert(JSON.stringify(row))
               }
             }
           }
-        ],
-        data: [
+        ])
+        const data = ref([
           {
             id: 0,
             name: 'Item 0',
@@ -87,12 +84,21 @@
             name: 'Item 5',
             price: '$5'
           }
-        ],
-        options: {
+        ])
+        const options = ref({
           search: true,
           showColumns: true
+        })
+
+        return {
+          columns,
+          data,
+          options
         }
       }
     })
+
+    app.component('BootstrapTable', BootstrapTable)
+    app.mount('#app')
   }
 </script>
