diff --git a/examples/vue/.eslintrc.js b/examples/vue/.eslintrc.js new file mode 100644 index 00000000..6e1de723 --- /dev/null +++ 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' + } +} \ No newline at end of file diff --git a/examples/vue/README.md b/examples/vue/README.md index 3f57dc75..f53269fa 100644 --- a/examples/vue/README.md +++ b/examples/vue/README.md @@ -1,17 +1,25 @@ -# 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 @@ -19,7 +27,7 @@ npm install ### Compiles and hot-reloads for development ``` -npm run serve +npm run dev ``` ### Compiles and minifies for production @@ -27,9 +35,9 @@ npm run serve 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 index 9392e25d..175c52f2 100644 --- 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 index 0006e5b4..8c1d3a44 100644 --- a/examples/vue/public/index.html +++ b/examples/vue/public/index.html @@ -1,17 +1,16 @@ - - - - + + + Using Analytics with Vue
- + diff --git a/examples/vue/src/App.vue b/examples/vue/src/App.vue index 0e6d7d84..70c9f02f 100644 --- a/examples/vue/src/App.vue +++ b/examples/vue/src/App.vue @@ -14,6 +14,7 @@ diff --git a/examples/vue/src/components/Home.vue b/examples/vue/src/components/Home.vue old mode 100755 new mode 100644 index 5201b076..0f84f83a --- a/examples/vue/src/components/Home.vue +++ b/examples/vue/src/components/Home.vue @@ -20,6 +20,6 @@ diff --git a/examples/vue/src/components/PageOne.vue b/examples/vue/src/components/PageOne.vue index b0aa7780..7f13f22c 100644 --- a/examples/vue/src/components/PageOne.vue +++ b/examples/vue/src/components/PageOne.vue @@ -6,6 +6,6 @@ diff --git a/examples/vue/src/components/PageThree.vue b/examples/vue/src/components/PageThree.vue index 2b24d449..f43ce6a1 100644 --- a/examples/vue/src/components/PageThree.vue +++ b/examples/vue/src/components/PageThree.vue @@ -6,6 +6,6 @@ diff --git a/examples/vue/src/components/PageTwo.vue b/examples/vue/src/components/PageTwo.vue old mode 100755 new mode 100644 index da1ef978..8b251da7 --- a/examples/vue/src/components/PageTwo.vue +++ b/examples/vue/src/components/PageTwo.vue @@ -6,6 +6,6 @@ diff --git a/examples/vue/src/main.js b/examples/vue/src/main.js old mode 100755 new mode 100644 index a11d5833..be768c14 --- 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 new file mode 100644 index 00000000..701c1482 --- /dev/null +++ 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' + } +}) \ No newline at end of file