DavidWells · github-actions · Jun 20, 2025
diff --git a/examples/vue/.eslintrc.js b/examples/vue/.eslintrc.js
@@ -0,0 +1,20 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+    browser: true,
+    es2022: true
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:vue/vue3-essential'
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module'
+  },
+  rules: {
+    'no-console': 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+  }
+}
diff --git a/examples/vue/README.md b/examples/vue/README.md
@@ -1,35 +1,43 @@
-# vue with `analytics` example
+# Vue 3 with `analytics` example
 
-How to use `analytics` with `vue` & `vue-router`.
+How to use `analytics` with `Vue 3` & `Vue Router 4`.
 
 See `./src/main.js` & `./src/analytics.js` for example code.
 
 Page views are fired from router `afterEach` events.
 
 ```js
-router.afterEach(( to, from ) => {
+router.afterEach((to, from) => {
   analytics.page()
 })
 ```
 
+## Modern Stack
+
+This example uses:
+- **Vue 3** - Latest version of Vue.js with Composition API support
+- **Vue Router 4** - Modern routing for Vue 3
+- **Vite** - Fast build tool and dev server
+- **Analytics** - Updated to latest version
+
 ## Project setup
 ```
 npm install
 ```
 
 ### Compiles and hot-reloads for development
 ```
-npm run serve
+npm run dev
 ```
 
 ### Compiles and minifies for production
 ```
 npm run build
 ```
 
-### Run your tests
+### Preview production build
 ```
-npm run test
+npm run preview  
 ```
 
 ### Lints and fixes files
@@ -38,4 +46,4 @@ npm run lint
 ```
 
 ### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+See [Vite Configuration Reference](https://vitejs.dev/config/).
diff --git a/examples/vue/package.json b/examples/vue/package.json
@@ -2,47 +2,26 @@
   "name": "vue",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "scripts": {
-    "start": "npm run serve",
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint",
+    "start": "npm run dev",
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --ext vue,js,jsx,cjs,mjs --fix --ignore-path .gitignore",
     "deploy": "netlify deploy -p"
   },
   "dependencies": {
-    "@analytics/google-analytics": "^0.2.2",
-    "analytics": "^0.3.0",
-    "core-js": "^2.6.5",
-    "vue": "^2.6.10",
-    "vue-router": "^3.0.7"
+    "@analytics/google-analytics": "^0.8.9",
+    "analytics": "^0.8.14",
+    "vue": "^3.4.0",
+    "vue-router": "^4.2.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.10.0",
-    "@vue/cli-plugin-eslint": "^3.10.0",
-    "@vue/cli-service": "^3.10.0",
-    "babel-eslint": "^10.0.1",
-    "eslint": "^5.16.0",
-    "eslint-plugin-vue": "^5.0.0",
-    "vue-template-compiler": "^2.6.10"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended"
-    ],
-    "rules": {},
-    "parserOptions": {
-      "parser": "babel-eslint"
-    }
-  },
-  "postcss": {
-    "plugins": {
-      "autoprefixer": {}
-    }
+    "@vitejs/plugin-vue": "^5.0.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-vue": "^9.19.0",
+    "vite": "^5.0.0"
   },
   "browserslist": [
     "> 1%",

diff --git a/examples/vue/public/index.html b/examples/vue/public/index.html
@@ -1,17 +1,16 @@
 <!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 %>favicon.ico">
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Using Analytics with Vue</title>
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
-    <!-- built files will be auto injected -->
+    <script type="module" src="/src/main.js"></script>
   </body>
 </html>
diff --git a/examples/vue/src/App.vue b/examples/vue/src/App.vue
@@ -14,6 +14,7 @@
 
 <script>
 export default {
+  name: 'App'
 }
 </script>
 

diff --git a/examples/vue/src/components/Home.vue b/examples/vue/src/components/Home.vue
@@ -20,6 +20,6 @@
 </template>
 <script>
 export default {
-
+  name: 'Home'
 }
 </script>
diff --git a/examples/vue/src/components/PageOne.vue b/examples/vue/src/components/PageOne.vue
@@ -6,6 +6,6 @@
 </template>
 <script>
 export default {
-
+  name: 'PageOne'
 }
 </script>
diff --git a/examples/vue/src/components/PageThree.vue b/examples/vue/src/components/PageThree.vue
@@ -6,6 +6,6 @@
 </template>
 <script>
 export default {
-
+  name: 'PageThree'
 }
 </script>
diff --git a/examples/vue/src/components/PageTwo.vue b/examples/vue/src/components/PageTwo.vue
@@ -6,6 +6,6 @@
 </template>
 <script>
 export default {
-
+  name: 'PageTwo'
 }
 </script>
diff --git a/examples/vue/src/main.js b/examples/vue/src/main.js
@@ -1,27 +1,23 @@
-import Vue from 'vue'
+import { createApp } from 'vue'
+import { createRouter, createWebHistory } from 'vue-router'
 import App from './App.vue'
-import VueRouter from 'vue-router'
 import updatePageTags from './utils/updatePageTags'
 import analytics from './analytics'
 import routes from './routes'
 
-Vue.config.productionTip = false
-
-Vue.use(VueRouter)
-
-const router = new VueRouter({
-  mode: 'history', routes
+const router = createRouter({
+  history: createWebHistory(),
+  routes
 })
 
 /* Update route title tags & page meta */
 router.beforeEach(updatePageTags)
 
-router.afterEach(( to, from ) => {
+router.afterEach((to, from) => {
   console.log(`Route change to ${to.path} from ${from.path}`) // eslint-disable-line
   analytics.page()
 })
 
-new Vue({
-    router,
-    render: h => h(App)
-}).$mount('#app')
+const app = createApp(App)
+app.use(router)
+app.mount('#app')
diff --git a/examples/vue/vite.config.js b/examples/vue/vite.config.js
@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+  server: {
+    port: 8080,
+    open: true
+  },
+  build: {
+    outDir: 'dist'
+  }
+})