diff --git a/examples/create-vue-js/.eslintrc.cjs b/examples/create-vue-js/.eslintrc.cjs
new file mode 100644
index 0000000..1be1485
--- /dev/null
+++ b/examples/create-vue-js/.eslintrc.cjs
@@ -0,0 +1,19 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+const path = require('node:path')
+const createAliasSetting = require('@vue/eslint-config-standard/createAliasSetting')
+
+module.exports = {
+ root: true,
+ extends: [
+ 'plugin:vue/vue3-essential',
+ '@vue/eslint-config-standard'
+ ],
+
+ settings: {
+ ...createAliasSetting({
+ '@': `${path.resolve(__dirname, './src')}`
+ })
+ }
+}
diff --git a/examples/create-vue-js/.gitignore b/examples/create-vue-js/.gitignore
new file mode 100644
index 0000000..38adffa
--- /dev/null
+++ b/examples/create-vue-js/.gitignore
@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/create-vue-js/.vscode/extensions.json b/examples/create-vue-js/.vscode/extensions.json
new file mode 100644
index 0000000..c0a6e5a
--- /dev/null
+++ b/examples/create-vue-js/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+ "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}
diff --git a/examples/create-vue-js/README.md b/examples/create-vue-js/README.md
new file mode 100644
index 0000000..4db78fa
--- /dev/null
+++ b/examples/create-vue-js/README.md
@@ -0,0 +1,35 @@
+# .
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Compile and Minify for Production
+
+```sh
+npm run build
+```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+npm run lint
+```
diff --git a/examples/create-vue-js/index.html b/examples/create-vue-js/index.html
new file mode 100644
index 0000000..030a6ff
--- /dev/null
+++ b/examples/create-vue-js/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+ Vite App
+
+
+
+
+
+
diff --git a/examples/create-vue-js/package.json b/examples/create-vue-js/package.json
new file mode 100644
index 0000000..358d731
--- /dev/null
+++ b/examples/create-vue-js/package.json
@@ -0,0 +1,25 @@
+{
+ "name": "create-vue-js",
+ "version": "0.0.0",
+ "scripts": {
+ "dev": "vite",
+ "build": "vite build",
+ "preview": "vite preview --port 4173",
+ "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
+ },
+ "dependencies": {
+ "pinia": "^2.0.16",
+ "vue": "^3.2.37",
+ "vue-router": "^4.1.2"
+ },
+ "devDependencies": {
+ "@rushstack/eslint-patch": "^1.1.4",
+ "@vitejs/plugin-vue": "^3.0.1",
+ "@vitejs/plugin-vue-jsx": "^2.0.0",
+ "@vue/eslint-config-standard": "workspace:*",
+ "eslint": "^8.5.0",
+ "eslint-plugin-vue": "^9.0.0",
+ "vite": "^3.0.1",
+ "vue": "^3.2.37"
+ }
+}
diff --git a/examples/create-vue-js/public/favicon.ico b/examples/create-vue-js/public/favicon.ico
new file mode 100644
index 0000000..df36fcf
Binary files /dev/null and b/examples/create-vue-js/public/favicon.ico differ
diff --git a/examples/create-vue-js/src/App.vue b/examples/create-vue-js/src/App.vue
new file mode 100644
index 0000000..e864195
--- /dev/null
+++ b/examples/create-vue-js/src/App.vue
@@ -0,0 +1,85 @@
+
+
+
+
+
+
+
+
+
+
+ Home
+ About
+
+
+
+
+
+
+
+
diff --git a/examples/create-vue-js/src/assets/base.css b/examples/create-vue-js/src/assets/base.css
new file mode 100644
index 0000000..71dc55a
--- /dev/null
+++ b/examples/create-vue-js/src/assets/base.css
@@ -0,0 +1,74 @@
+/* color palette from */
+:root {
+ --vt-c-white: #ffffff;
+ --vt-c-white-soft: #f8f8f8;
+ --vt-c-white-mute: #f2f2f2;
+
+ --vt-c-black: #181818;
+ --vt-c-black-soft: #222222;
+ --vt-c-black-mute: #282828;
+
+ --vt-c-indigo: #2c3e50;
+
+ --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+ --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+ --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+ --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+
+ --vt-c-text-light-1: var(--vt-c-indigo);
+ --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+ --vt-c-text-dark-1: var(--vt-c-white);
+ --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+}
+
+/* semantic color variables for this project */
+:root {
+ --color-background: var(--vt-c-white);
+ --color-background-soft: var(--vt-c-white-soft);
+ --color-background-mute: var(--vt-c-white-mute);
+
+ --color-border: var(--vt-c-divider-light-2);
+ --color-border-hover: var(--vt-c-divider-light-1);
+
+ --color-heading: var(--vt-c-text-light-1);
+ --color-text: var(--vt-c-text-light-1);
+
+ --section-gap: 160px;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --color-background: var(--vt-c-black);
+ --color-background-soft: var(--vt-c-black-soft);
+ --color-background-mute: var(--vt-c-black-mute);
+
+ --color-border: var(--vt-c-divider-dark-2);
+ --color-border-hover: var(--vt-c-divider-dark-1);
+
+ --color-heading: var(--vt-c-text-dark-1);
+ --color-text: var(--vt-c-text-dark-2);
+ }
+}
+
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ position: relative;
+ font-weight: normal;
+}
+
+body {
+ min-height: 100vh;
+ color: var(--color-text);
+ background: var(--color-background);
+ transition: color 0.5s, background-color 0.5s;
+ line-height: 1.6;
+ font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+ Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+ font-size: 15px;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
diff --git a/examples/create-vue-js/src/assets/logo.svg b/examples/create-vue-js/src/assets/logo.svg
new file mode 100644
index 0000000..bc826fe
--- /dev/null
+++ b/examples/create-vue-js/src/assets/logo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/examples/create-vue-js/src/assets/main.css b/examples/create-vue-js/src/assets/main.css
new file mode 100644
index 0000000..c133f91
--- /dev/null
+++ b/examples/create-vue-js/src/assets/main.css
@@ -0,0 +1,35 @@
+@import "./base.css";
+
+#app {
+ max-width: 1280px;
+ margin: 0 auto;
+ padding: 2rem;
+
+ font-weight: normal;
+}
+
+a,
+.green {
+ text-decoration: none;
+ color: hsla(160, 100%, 37%, 1);
+ transition: 0.4s;
+}
+
+@media (hover: hover) {
+ a:hover {
+ background-color: hsla(160, 100%, 37%, 0.2);
+ }
+}
+
+@media (min-width: 1024px) {
+ body {
+ display: flex;
+ place-items: center;
+ }
+
+ #app {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ padding: 0 2rem;
+ }
+}
diff --git a/examples/create-vue-js/src/components/FooComp.jsx b/examples/create-vue-js/src/components/FooComp.jsx
new file mode 100644
index 0000000..4e0c118
--- /dev/null
+++ b/examples/create-vue-js/src/components/FooComp.jsx
@@ -0,0 +1,7 @@
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+ setup () {
+ return () => Foo
+ }
+})
diff --git a/examples/create-vue-js/src/components/HelloWorld.vue b/examples/create-vue-js/src/components/HelloWorld.vue
new file mode 100644
index 0000000..1b8faac
--- /dev/null
+++ b/examples/create-vue-js/src/components/HelloWorld.vue
@@ -0,0 +1,43 @@
+
+
+
+
+
{{ msg }}
+
+ You’ve successfully created a project with
+ Vite +
+ Vue 3 .
+
+
+
+
+
diff --git a/examples/create-vue-js/src/components/JsxInVue.vue b/examples/create-vue-js/src/components/JsxInVue.vue
new file mode 100644
index 0000000..71949cb
--- /dev/null
+++ b/examples/create-vue-js/src/components/JsxInVue.vue
@@ -0,0 +1,9 @@
+
diff --git a/examples/create-vue-js/src/components/TheWelcome.vue b/examples/create-vue-js/src/components/TheWelcome.vue
new file mode 100644
index 0000000..d3d2e7a
--- /dev/null
+++ b/examples/create-vue-js/src/components/TheWelcome.vue
@@ -0,0 +1,84 @@
+
+
+
+
+
+
+
+ Documentation
+
+ Vue’s
+ official documentation
+ provides you with all information you need to get started.
+
+
+
+
+
+
+ Tooling
+
+ This project is served and bundled with
+ Vite . The recommended IDE
+ setup is VSCode +
+ Volar . If you need to test
+ your components and web pages, check out
+ Cypress and
+ Cypress Component Testing .
+
+
+
+ More instructions are available in README.md
.
+
+
+
+
+
+
+ Ecosystem
+
+ Get official tools and libraries for your project:
+ Pinia ,
+ Vue Router ,
+ Vue Test Utils , and
+ Vue Dev Tools . If you need more
+ resources, we suggest paying
+ Awesome Vue
+ a visit.
+
+
+
+
+
+
+ Community
+
+ Got stuck? Ask your question on
+ Vue Land , our official Discord server, or
+ StackOverflow .
+ You should also subscribe to
+ our mailing list and follow the official
+ @vuejs
+ twitter account for latest news in the Vue world.
+
+
+
+
+
+
+ Support Vue
+
+ As an independent project, Vue relies on community backing for its sustainability. You can help
+ us by
+ becoming a sponsor .
+
+
diff --git a/examples/create-vue-js/src/components/WelcomeItem.vue b/examples/create-vue-js/src/components/WelcomeItem.vue
new file mode 100644
index 0000000..ba0def3
--- /dev/null
+++ b/examples/create-vue-js/src/components/WelcomeItem.vue
@@ -0,0 +1,86 @@
+
+
+
+
+
diff --git a/examples/create-vue-js/src/components/icons/IconCommunity.vue b/examples/create-vue-js/src/components/icons/IconCommunity.vue
new file mode 100644
index 0000000..2dc8b05
--- /dev/null
+++ b/examples/create-vue-js/src/components/icons/IconCommunity.vue
@@ -0,0 +1,7 @@
+
+
+
+
+
diff --git a/examples/create-vue-js/src/components/icons/IconDocumentation.vue b/examples/create-vue-js/src/components/icons/IconDocumentation.vue
new file mode 100644
index 0000000..6d4791c
--- /dev/null
+++ b/examples/create-vue-js/src/components/icons/IconDocumentation.vue
@@ -0,0 +1,7 @@
+
+
+
+
+
diff --git a/examples/create-vue-js/src/components/icons/IconEcosystem.vue b/examples/create-vue-js/src/components/icons/IconEcosystem.vue
new file mode 100644
index 0000000..c3a4f07
--- /dev/null
+++ b/examples/create-vue-js/src/components/icons/IconEcosystem.vue
@@ -0,0 +1,7 @@
+
+
+
+
+
diff --git a/examples/create-vue-js/src/components/icons/IconSupport.vue b/examples/create-vue-js/src/components/icons/IconSupport.vue
new file mode 100644
index 0000000..7452834
--- /dev/null
+++ b/examples/create-vue-js/src/components/icons/IconSupport.vue
@@ -0,0 +1,7 @@
+
+
+
+
+
diff --git a/examples/create-vue-js/src/components/icons/IconTooling.vue b/examples/create-vue-js/src/components/icons/IconTooling.vue
new file mode 100644
index 0000000..660598d
--- /dev/null
+++ b/examples/create-vue-js/src/components/icons/IconTooling.vue
@@ -0,0 +1,19 @@
+
+
+
+
+
+
diff --git a/examples/create-vue-js/src/main.js b/examples/create-vue-js/src/main.js
new file mode 100644
index 0000000..8c0577f
--- /dev/null
+++ b/examples/create-vue-js/src/main.js
@@ -0,0 +1,15 @@
+/* eslint import/no-unresolved: 2 */
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+
+import App from '@/App.vue'
+import router from './router'
+
+import './assets/main.css'
+
+const app = createApp(App)
+
+app.use(createPinia())
+app.use(router)
+
+app.mount('#app')
diff --git a/examples/create-vue-js/src/router/index.js b/examples/create-vue-js/src/router/index.js
new file mode 100644
index 0000000..a49ae50
--- /dev/null
+++ b/examples/create-vue-js/src/router/index.js
@@ -0,0 +1,23 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import HomeView from '../views/HomeView.vue'
+
+const router = createRouter({
+ history: createWebHistory(import.meta.env.BASE_URL),
+ routes: [
+ {
+ path: '/',
+ name: 'home',
+ component: HomeView
+ },
+ {
+ path: '/about',
+ name: 'about',
+ // route level code-splitting
+ // this generates a separate chunk (About.[hash].js) for this route
+ // which is lazy-loaded when the route is visited.
+ component: () => import('../views/AboutView.vue')
+ }
+ ]
+})
+
+export default router
diff --git a/examples/create-vue-js/src/stores/counter.js b/examples/create-vue-js/src/stores/counter.js
new file mode 100644
index 0000000..6a4540e
--- /dev/null
+++ b/examples/create-vue-js/src/stores/counter.js
@@ -0,0 +1,16 @@
+import { defineStore } from 'pinia'
+
+export const useCounterStore = defineStore({
+ id: 'counter',
+ state: () => ({
+ counter: 0
+ }),
+ getters: {
+ doubleCount: (state) => state.counter * 2
+ },
+ actions: {
+ increment () {
+ this.counter++
+ }
+ }
+})
diff --git a/examples/create-vue-js/src/views/AboutView.vue b/examples/create-vue-js/src/views/AboutView.vue
new file mode 100644
index 0000000..56a4a7f
--- /dev/null
+++ b/examples/create-vue-js/src/views/AboutView.vue
@@ -0,0 +1,22 @@
+
+
+
+
+
This is an about page
+
+
+
+
+
+
diff --git a/examples/create-vue-js/src/views/HomeView.vue b/examples/create-vue-js/src/views/HomeView.vue
new file mode 100644
index 0000000..225d93a
--- /dev/null
+++ b/examples/create-vue-js/src/views/HomeView.vue
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
diff --git a/examples/create-vue-js/vite.config.js b/examples/create-vue-js/vite.config.js
new file mode 100644
index 0000000..2fb21e9
--- /dev/null
+++ b/examples/create-vue-js/vite.config.js
@@ -0,0 +1,15 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [vue(), vueJsx()],
+ resolve: {
+ alias: {
+ '@': fileURLToPath(new URL('./src', import.meta.url))
+ }
+ }
+})
diff --git a/examples/vue-cli-js/.browserslistrc b/examples/vue-cli-js/.browserslistrc
new file mode 100644
index 0000000..dc3bc09
--- /dev/null
+++ b/examples/vue-cli-js/.browserslistrc
@@ -0,0 +1,4 @@
+> 1%
+last 2 versions
+not dead
+not ie 11
diff --git a/examples/vue-cli-js/.eslintrc.cjs b/examples/vue-cli-js/.eslintrc.cjs
new file mode 100644
index 0000000..1be1485
--- /dev/null
+++ b/examples/vue-cli-js/.eslintrc.cjs
@@ -0,0 +1,19 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+const path = require('node:path')
+const createAliasSetting = require('@vue/eslint-config-standard/createAliasSetting')
+
+module.exports = {
+ root: true,
+ extends: [
+ 'plugin:vue/vue3-essential',
+ '@vue/eslint-config-standard'
+ ],
+
+ settings: {
+ ...createAliasSetting({
+ '@': `${path.resolve(__dirname, './src')}`
+ })
+ }
+}
diff --git a/examples/vue-cli-js/.gitignore b/examples/vue-cli-js/.gitignore
new file mode 100644
index 0000000..403adbc
--- /dev/null
+++ b/examples/vue-cli-js/.gitignore
@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/vue-cli-js/README.md b/examples/vue-cli-js/README.md
new file mode 100644
index 0000000..76dd000
--- /dev/null
+++ b/examples/vue-cli-js/README.md
@@ -0,0 +1,24 @@
+# vue-cli-js
+
+## Project setup
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+```
+yarn serve
+```
+
+### Compiles and minifies for production
+```
+yarn build
+```
+
+### Lints and fixes files
+```
+yarn lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
diff --git a/examples/vue-cli-js/babel.config.js b/examples/vue-cli-js/babel.config.js
new file mode 100644
index 0000000..e955840
--- /dev/null
+++ b/examples/vue-cli-js/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+ presets: [
+ '@vue/cli-plugin-babel/preset'
+ ]
+}
diff --git a/examples/vue-cli-js/jsconfig.json b/examples/vue-cli-js/jsconfig.json
new file mode 100644
index 0000000..4aafc5f
--- /dev/null
+++ b/examples/vue-cli-js/jsconfig.json
@@ -0,0 +1,19 @@
+{
+ "compilerOptions": {
+ "target": "es5",
+ "module": "esnext",
+ "baseUrl": "./",
+ "moduleResolution": "node",
+ "paths": {
+ "@/*": [
+ "src/*"
+ ]
+ },
+ "lib": [
+ "esnext",
+ "dom",
+ "dom.iterable",
+ "scripthost"
+ ]
+ }
+}
diff --git a/examples/vue-cli-js/package.json b/examples/vue-cli-js/package.json
new file mode 100644
index 0000000..65550ec
--- /dev/null
+++ b/examples/vue-cli-js/package.json
@@ -0,0 +1,26 @@
+{
+ "name": "vue-cli-js",
+ "version": "0.1.0",
+ "private": true,
+ "scripts": {
+ "serve": "vue-cli-service serve",
+ "build": "vue-cli-service build",
+ "lint": "vue-cli-service lint"
+ },
+ "dependencies": {
+ "core-js": "^3.8.3",
+ "vue": "^3.2.13",
+ "vue-router": "^4.0.3"
+ },
+ "devDependencies": {
+ "@babel/core": "^7.12.16",
+ "@rushstack/eslint-patch": "^1.1.4",
+ "@vue/cli-plugin-babel": "~5.0.0",
+ "@vue/cli-plugin-eslint": "~5.0.0",
+ "@vue/cli-plugin-router": "~5.0.0",
+ "@vue/cli-service": "~5.0.0",
+ "@vue/eslint-config-standard": "workspace:*",
+ "eslint": "^8.5.0",
+ "eslint-plugin-vue": "^9.0.0"
+ }
+}
diff --git a/examples/vue-cli-js/public/favicon.ico b/examples/vue-cli-js/public/favicon.ico
new file mode 100644
index 0000000..df36fcf
Binary files /dev/null and b/examples/vue-cli-js/public/favicon.ico differ
diff --git a/examples/vue-cli-js/public/index.html b/examples/vue-cli-js/public/index.html
new file mode 100644
index 0000000..3e5a139
--- /dev/null
+++ b/examples/vue-cli-js/public/index.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
+ <%= htmlWebpackPlugin.options.title %>
+
+
+
+ We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.
+
+
+
+
+
diff --git a/examples/vue-cli-js/src/App.vue b/examples/vue-cli-js/src/App.vue
new file mode 100644
index 0000000..a753dba
--- /dev/null
+++ b/examples/vue-cli-js/src/App.vue
@@ -0,0 +1,30 @@
+
+
+ Home |
+ About
+
+
+
+
+
diff --git a/examples/vue-cli-js/src/assets/logo.png b/examples/vue-cli-js/src/assets/logo.png
new file mode 100644
index 0000000..f3d2503
Binary files /dev/null and b/examples/vue-cli-js/src/assets/logo.png differ
diff --git a/examples/vue-cli-js/src/components/HelloWorld.vue b/examples/vue-cli-js/src/components/HelloWorld.vue
new file mode 100644
index 0000000..b2c8940
--- /dev/null
+++ b/examples/vue-cli-js/src/components/HelloWorld.vue
@@ -0,0 +1,59 @@
+
+
+
{{ msg }}
+
+ For a guide and recipes on how to configure / customize this project,
+ check out the
+ vue-cli documentation .
+
+
Installed CLI Plugins
+
+
Essential Links
+
+
Ecosystem
+
+
+
+
+
+
+
+
diff --git a/examples/vue-cli-js/src/main.js b/examples/vue-cli-js/src/main.js
new file mode 100644
index 0000000..df199b1
--- /dev/null
+++ b/examples/vue-cli-js/src/main.js
@@ -0,0 +1,6 @@
+/* eslint import/no-unresolved: 2 */
+import { createApp } from 'vue'
+import App from '@/App.vue'
+import router from './router'
+
+createApp(App).use(router).mount('#app')
diff --git a/examples/vue-cli-js/src/router/index.js b/examples/vue-cli-js/src/router/index.js
new file mode 100644
index 0000000..d3a856e
--- /dev/null
+++ b/examples/vue-cli-js/src/router/index.js
@@ -0,0 +1,25 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import HomeView from '../views/HomeView.vue'
+
+const routes = [
+ {
+ path: '/',
+ name: 'home',
+ component: HomeView
+ },
+ {
+ path: '/about',
+ name: 'about',
+ // route level code-splitting
+ // this generates a separate chunk (about.[hash].js) for this route
+ // which is lazy-loaded when the route is visited.
+ component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
+ }
+]
+
+const router = createRouter({
+ history: createWebHistory(process.env.BASE_URL),
+ routes
+})
+
+export default router
diff --git a/examples/vue-cli-js/src/views/AboutView.vue b/examples/vue-cli-js/src/views/AboutView.vue
new file mode 100644
index 0000000..3fa2807
--- /dev/null
+++ b/examples/vue-cli-js/src/views/AboutView.vue
@@ -0,0 +1,5 @@
+
+
+
This is an about page
+
+
diff --git a/examples/vue-cli-js/src/views/HomeView.vue b/examples/vue-cli-js/src/views/HomeView.vue
new file mode 100644
index 0000000..e8d96d7
--- /dev/null
+++ b/examples/vue-cli-js/src/views/HomeView.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
diff --git a/examples/vue-cli-js/vue.config.js b/examples/vue-cli-js/vue.config.js
new file mode 100644
index 0000000..910e297
--- /dev/null
+++ b/examples/vue-cli-js/vue.config.js
@@ -0,0 +1,4 @@
+const { defineConfig } = require('@vue/cli-service')
+module.exports = defineConfig({
+ transpileDependencies: true
+})
diff --git a/packages/eslint-config-standard/.eslintrc.cjs b/packages/eslint-config-standard/.eslintrc.cjs
new file mode 100644
index 0000000..72efea8
--- /dev/null
+++ b/packages/eslint-config-standard/.eslintrc.cjs
@@ -0,0 +1,28 @@
+const { DEFAULT_RESOLVER_SETTING } = require('./createAliasSetting.cjs')
+
+module.exports = {
+ extends: [
+ require.resolve('eslint-config-standard')
+ ],
+ settings: {
+ 'import/resolver': DEFAULT_RESOLVER_SETTING,
+
+ // A list of file extensions that will be parsed as modules and inspected for exports.
+ // Not actually needed, as none of the `import/*` rules that `standard` used requires this setting.
+ // Added for easier customization.
+ 'import/extensions': [
+ '.mjs',
+ '.js',
+ '.jsx'
+ ]
+ },
+ rules: {
+ // Cannot omit `.vue` extensions.
+ // This should be enforced all across the Vue.js ecosystem.
+ 'import/extensions': [
+ 'error', {
+ vue: 'always'
+ }
+ ]
+ }
+}
diff --git a/packages/eslint-config-standard/README.md b/packages/eslint-config-standard/README.md
index e69de29..4b2dd58 100644
--- a/packages/eslint-config-standard/README.md
+++ b/packages/eslint-config-standard/README.md
@@ -0,0 +1,39 @@
+# `@vue/eslint-config-standard`
+
+> eslint-config-standard for Vue
+
+This config is specifically designed to be used by `@vue/cli` & `create-vue` setups
+and is not meant for outside use (it can be used but some adaptations
+on the user side might be needed - for details see the config file).
+
+A part of its design is that this config may implicitly depend on
+other parts of `@vue/cli`/`create-vue` setups, such as `eslint-plugin-vue` being
+extended in the same resulting config.
+
+## Installation
+
+In order to work around [a known limitation in ESLint](https://github.com/eslint/eslint/issues/3458), we recommend you to use this package alongside `@rushstack/eslint-patch`, so that you don't have to install too many dependencies:
+
+```sh
+npm add --dev @vue/eslint-config-standard @rushstack/eslint-patch
+```
+
+## Usage
+
+An example `.eslintrc.cjs`:
+
+```js
+/* eslint-env node */
+require("@rushstack/eslint-patch/modern-module-resolution")
+
+module.exports = {
+ extends: [
+ 'plugin:vue/vue3-essential',
+ '@vue/eslint-config-standard'
+ ]
+}
+```
+
+## Aliases
+
+As
diff --git a/packages/eslint-config-standard/createAliasSetting.cjs b/packages/eslint-config-standard/createAliasSetting.cjs
new file mode 100644
index 0000000..77d147c
--- /dev/null
+++ b/packages/eslint-config-standard/createAliasSetting.cjs
@@ -0,0 +1,25 @@
+const DEFAULT_RESOLVER_SETTING = {
+ // https://github.com/benmosher/eslint-plugin-import/issues/1396
+ // The default config is good enough, so just an empty object here
+ [require.resolve('eslint-import-resolver-node')]: {}
+}
+
+/**
+ * create an ESLint `settings` object
+ * that help configure the import resolver with given aliases.
+ * @param {Object} alias a key-value pair, key is the alias prefix, value is the actual path. Note it's not glob or regex.
+ * @returns an object to be spread into `settings` property of ESLint config.
+ */
+module.exports = function createAliasSetting (alias) {
+ return {
+ 'import/resolver': {
+ ...DEFAULT_RESOLVER_SETTING,
+ [require.resolve('eslint-import-resolver-custom-alias')]: {
+ alias,
+ extensions: ['.mjs', '.js', '.jsx', '.json', '.node']
+ }
+ }
+ }
+}
+
+module.exports.DEFAULT_RESOLVER_SETTING = DEFAULT_RESOLVER_SETTING
diff --git a/packages/eslint-config-standard/index.cjs b/packages/eslint-config-standard/index.cjs
new file mode 100644
index 0000000..75dc27c
--- /dev/null
+++ b/packages/eslint-config-standard/index.cjs
@@ -0,0 +1 @@
+module.exports = require('./.eslintrc.cjs')
diff --git a/packages/eslint-config-standard/index.js b/packages/eslint-config-standard/index.js
deleted file mode 100644
index ba6a110..0000000
--- a/packages/eslint-config-standard/index.js
+++ /dev/null
@@ -1,22 +0,0 @@
-// https://github.com/benmosher/eslint-plugin-import/issues/1396
-const resolver = {
- [require.resolve('eslint-import-resolver-node')]: {},
-}
-
-// TODO: API for custom aliases
-
-module.exports = {
- extends: [
- require.resolve('eslint-config-standard')
- ],
- settings: {
- 'import/resolver': resolver,
- 'import/extensions': [
- '.js',
- '.jsx',
- '.mjs',
- '.ts',
- '.tsx',
- ],
- },
-}
diff --git a/packages/eslint-config-standard/package.json b/packages/eslint-config-standard/package.json
index 39bb384..016146e 100644
--- a/packages/eslint-config-standard/package.json
+++ b/packages/eslint-config-standard/package.json
@@ -2,7 +2,12 @@
"name": "@vue/eslint-config-standard",
"version": "7.0.0",
"description": "eslint-config-standard for Vue.js projects",
- "main": "index.js",
+ "main": "index.cjs",
+ "exports": {
+ ".": "./index.cjs",
+ "./createAliasSetting": "./createAliasSetting.cjs",
+ "./package.json": "./package.json"
+ },
"publishConfig": {
"access": "public"
},
@@ -29,9 +34,12 @@
"eslint-plugin-import": "^2.25.2",
"eslint-plugin-n": "^15.0.0",
"eslint-plugin-promise": "^6.0.0",
- "eslint-plugin-vue": "^8.7.1"
+ "eslint-plugin-vue": "^9.2.0"
},
"peerDependencies": {
"eslint": "^8.0.1"
+ },
+ "devDependencies": {
+ "eslint": "^8.0.1"
}
}