firstCommit

.eslintrc.js

@@ -3,16 +3,17 @@ module.exports = {
   env: {
     node: true,
   },
-  extends: [
+  extends: ['plugin:vue/vue3-essential', 'eslint:recommended', 'plugin:prettier/recommended'],
-    "plugin:vue/vue3-essential",
-    "eslint:recommended",
-    "plugin:prettier/recommended",
-  ],
   parserOptions: {
-    parser: "@babel/eslint-parser",
+    parser: '@babel/eslint-parser',
   },
   rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
+    'vue/no-multiple-template-root': 0,
-    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+    'prettier/prettier': [
+      'error',
+      {
+        endOfLine: 'auto',
+      },
+    ],
   },
 };

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "singleQuote": true,
+  "semi": true,
+  "useTabs": false,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "printWidth": 100
+}

babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: ["@vue/cli-plugin-babel/preset"],
+  presets: ['@vue/cli-plugin-babel/preset'],
 };

jsconfig.json

@@ -5,15 +5,8 @@
     "baseUrl": "./",
     "moduleResolution": "node",
     "paths": {
-      "@/*": [
+      "@/*": ["src/*"]
-        "src/*"
-      ]
     },
-    "lib": [
+    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
-      "esnext",
-      "dom",
-      "dom.iterable",
-      "scripthost"
-    ]
   }
 }

package-lock.json

@@ -25,7 +25,7 @@
         "eslint-config-prettier": "^8.3.0",
         "eslint-plugin-prettier": "^4.0.0",
         "eslint-plugin-vue": "^8.0.3",
-        "prettier": "^2.4.1",
+        "prettier": "2.7.1",
         "sass": "^1.32.7",
         "sass-loader": "^12.0.0"
       }
@@ -13419,7 +13419,8 @@
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/@vue/cli-plugin-vuex/-/cli-plugin-vuex-5.0.8.tgz",
       "integrity": "sha512-HSYWPqrunRE5ZZs8kVwiY6oWcn95qf/OQabwLfprhdpFWAGtLStShjsGED2aDpSSeGAskQETrtR/5h7VqgIlBA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@vue/cli-service": {
       "version": "5.0.8",
@@ -13930,13 +13931,15 @@
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
       "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "acorn-jsx": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "acorn-walk": {
       "version": "8.2.0",
@@ -13995,7 +13998,8 @@
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "ansi-colors": {
       "version": "4.1.3",
@@ -14806,7 +14810,8 @@
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.0.tgz",
       "integrity": "sha512-OGT677UGHJTAVMRhPO+HJ4oKln3wkBTwtDFH0ojbqm+MJm6xuDMHp2nkhh/ThaBqq20IbraBQSWKfSLNHQO9Og==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "css-loader": {
       "version": "6.7.1",
@@ -14977,7 +14982,8 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-3.1.0.tgz",
       "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "csso": {
       "version": "4.2.0",
@@ -15564,7 +15570,8 @@
       "version": "8.5.0",
       "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz",
       "integrity": "sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "eslint-plugin-prettier": {
       "version": "4.2.1",
@@ -16454,7 +16461,8 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
       "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "ieee754": {
       "version": "1.2.1",
@@ -17827,25 +17835,29 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz",
       "integrity": "sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-discard-duplicates": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz",
       "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-discard-empty": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.1.1.tgz",
       "integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-discard-overridden": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz",
       "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-loader": {
       "version": "6.2.1",
@@ -17935,7 +17947,8 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
       "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-modules-local-by-default": {
       "version": "4.0.0",
@@ -17970,7 +17983,8 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz",
       "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-normalize-display-values": {
       "version": "5.1.0",
@@ -19836,7 +19850,8 @@
           "version": "8.8.0",
           "resolved": "https://registry.npmjs.org/ws/-/ws-8.8.0.tgz",
           "integrity": "sha512-JDAgSYQ1ksuwqfChJusw1LSJ8BizJ2e/vVu5Lxjq3YvNJNlROv1ui4i+c/kUUrPheBvQl4c5UbERhTwKa6QBJQ==",
-          "dev": true
+          "dev": true,
+          "requires": {}
         }
       }
     },
@@ -19963,7 +19978,8 @@
       "version": "7.5.8",
       "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.8.tgz",
       "integrity": "sha512-ri1Id1WinAX5Jqn9HejiGb8crfRio0Qgu8+MtL36rlTA6RLsMdWt1Az/19A2Qij6uSHUMphEFaTKa4WG+UNHNw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "y18n": {
       "version": "5.0.8",

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "serve": "vue-cli-service serve --port 3000",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
   },
@@ -25,7 +25,7 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-vue": "^8.0.3",
-    "prettier": "^2.4.1",
+    "prettier": "2.7.1",
     "sass": "^1.32.7",
     "sass-loader": "^12.0.0"
   }

src/App.vue

@@ -1,9 +1,11 @@
 <template>
+  <div>
     <nav>
       <router-link to="/">Home</router-link> |
       <router-link to="/about">About</router-link>
     </nav>
     <router-view />
+  </div>
 </template>
 
 <style lang="scss">

src/components/HelloWorld.vue

@@ -4,9 +4,7 @@
     <p>
       For a guide and recipes on how to configure / customize this project,<br />
       check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-        >vue-cli documentation</a
-      >.
     </p>
     <h3>Installed CLI Plugins</h3>
     <ul>
@@ -49,19 +47,13 @@
         <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
       </li>
       <li>
-        <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
+        <a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a>
-          >Forum</a
-        >
       </li>
       <li>
-        <a href="https://chat.vuejs.org" target="_blank" rel="noopener"
+        <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a>
-          >Community Chat</a
-        >
       </li>
       <li>
-        <a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
+        <a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a>
-          >Twitter</a
-        >
       </li>
       <li>
         <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
@@ -70,31 +62,21 @@
     <h3>Ecosystem</h3>
     <ul>
       <li>
-        <a href="https://router.vuejs.org" target="_blank" rel="noopener"
+        <a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a>
-          >vue-router</a
-        >
       </li>
       <li>
         <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
       </li>
       <li>
-        <a
+        <a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener"
-          href="https://github.com/vuejs/vue-devtools#vue-devtools"
-          target="_blank"
-          rel="noopener"
           >vue-devtools</a
         >
       </li>
       <li>
-        <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
+        <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a>
-          >vue-loader</a
-        >
       </li>
       <li>
-        <a
+        <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener"
-          href="https://github.com/vuejs/awesome-vue"
-          target="_blank"
-          rel="noopener"
           >awesome-vue</a
         >
       </li>
@@ -104,7 +86,7 @@
 
 <script>
 export default {
-  name: "HelloWorld",
+  name: 'HelloWorld',
   props: {
     msg: String,
   },

src/main.js

@@ -1,6 +1,6 @@
-import { createApp } from "vue";
+import { createApp } from 'vue';
-import App from "./App.vue";
+import App from './App.vue';
-import router from "./router";
+import router from './router';
-import store from "./store";
+import store from './store';
 
-createApp(App).use(store).use(router).mount("#app");
+createApp(App).use(store).use(router).mount('#app');

src/router/index.js

@@ -1,20 +1,19 @@
-import { createRouter, createWebHistory } from "vue-router";
+import { createRouter, createWebHistory } from 'vue-router';
-import HomeView from "../views/HomeView.vue";
+import HomeView from '../views/HomeView.vue';
 
 const routes = [
   {
-    path: "/",
+    path: '/',
-    name: "home",
+    name: 'home',
     component: HomeView,
   },
   {
-    path: "/about",
+    path: '/about',
-    name: "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: () =>
+    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue'),
-      import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
   },
 ];
 

src/store/index.js

@@ -1,4 +1,4 @@
-import { createStore } from "vuex";
+import { createStore } from 'vuex';
 
 export default createStore({
   state: {},

src/views/HomeView.vue

@@ -7,10 +7,10 @@
 
 <script>
 // @ is an alias to /src
-import HelloWorld from "@/components/HelloWorld.vue";
+import HelloWorld from '@/components/HelloWorld.vue';
 
 export default {
-  name: "HomeView",
+  name: 'HomeView',
   components: {
     HelloWorld,
   },

vetur.config.js

@@ -0,0 +1,40 @@
+// vetur.config.js
+/** @type {import('vls').VeturConfig} */
+module.exports = {
+  // **optional** default: `{}`
+  // override vscode settings
+  // Notice: It only affects the settings used by Vetur.
+  settings: {
+    'vetur.useWorkspaceDependencies': true,
+    'vetur.experimental.templateInterpolationService': true,
+  },
+  // **optional** default: `[{ root: './' }]`
+  // support monorepos
+  projects: [
+    './packages/repo2', // Shorthand for specifying only the project root location
+    {
+      // **required**
+      // Where is your project?
+      // It is relative to `vetur.config.js`.
+      root: './packages/repo1',
+      // **optional** default: `'package.json'`
+      // Where is `package.json` in the project?
+      // We use it to determine the version of vue.
+      // It is relative to root property.
+      package: './package.json',
+      // **optional**
+      // Where is TypeScript config file in the project?
+      // It is relative to root property.
+      tsconfig: './tsconfig.json',
+      // **optional** default: `'./.vscode/vetur/snippets'`
+      // Where is vetur custom snippets folders?
+      snippetFolder: './.vscode/vetur/snippets',
+      // **optional** default: `[]`
+      // Register globally Vue component glob.
+      // If you set it, you can get completion by that components.
+      // It is relative to root property.
+      // Notice: It won't actually do it. You need to use `require.context` or `Vue.component`
+      globalComponents: ['./src/components/**/*.vue'],
+    },
+  ],
+};

vue.config.js

@@ -1,4 +1,7 @@
-const { defineConfig } = require("@vue/cli-service");
+const { defineConfig } = require('@vue/cli-service');
 module.exports = defineConfig({
   transpileDependencies: true,
+  devServer: {
+    allowedHosts: 'all',
+  },
 });