update frontend project

.vscode/extensions.json

 {
   "recommendations": [
-    "octref.vetur",
+    "Vue.volar",
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
-    "digitalbrainstem.javascript-ejs-support",
-    "ms-azuretools.vscode-cosmosdb"
+    "mongodb.mongodb-vscode"
   ]
 }

.vscode/settings.json

@@ -2,19 +2,11 @@
   "editor.formatOnSave": true,
   "eslint.format.enable": true,
   "eslint.workingDirectories": [{ "mode": "auto" }],
-  "[html]": {
+  "volar.codeLens.references": false,
+  "[html][json][md]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-  "[javascript]": {
+  "[javascript][vue]": {
     "editor.defaultFormatter": "dbaeumer.vscode-eslint"
-  },
-  "[vue]": {
-    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
-  },
-  "[json]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[md]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
 }

frontend/.browserslistrc

-> 1%
-last 2 versions
-not dead

frontend/.eslintrc.js

@@ -3,14 +3,19 @@ module.exports = {
   env: {
     node: true,
   },
-  extends: ["plugin:vue/vue3-essential", "eslint:recommended", "@vue/prettier"],
+  extends: [
+    "plugin:vue/vue3-essential",
+    "eslint:recommended",
+    "plugin:prettier/recommended",
+  ],
   parserOptions: {
-    ecmaVersion: 2020,
+    parser: "@babel/eslint-parser",
   },
   rules: {
     "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
     "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
     "vue/attribute-hyphenation": ["error", "never"],
     "vue/component-name-in-template-casing": "error",
+    "vue/multi-word-component-names": "off",
   },
 };

vetur.config.js → frontend/babel.config.js

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

frontend/jsconfig.json

 {
   "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "jsx": "preserve",
     "paths": {
-      "@/*": ["./src/*"]
-    }
+      "@/*": ["src/*"]
+    },
+    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
   }
 }

frontend/package.json

@@ -8,19 +8,28 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "axios": "^0.21.1",
-    "vue": "^3.0.0",
-    "vue-router": "^4.0.0-0"
+    "axios": "^0.27.2",
+    "core-js": "^3.8.3",
+    "vue": "^3.2.13",
+    "vue-router": "^4.0.3"
   },
   "devDependencies": {
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-router": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/compiler-sfc": "^3.0.11",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "eslint": "^7.28.0",
-    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-vue": "^7.10.0",
-    "prettier": "^2.3.1"
-  }
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@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",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "prettier": "^2.4.1"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead",
+    "not ie 11"
+  ]
 }

frontend/src/components/AddUser.vue

@@ -30,6 +30,7 @@ import axios from "axios";
 
 export default {
   name: "AddUser",
+  emits: ["userAdded"],
   data: function () {
     return {
       user: {

frontend/src/components/UsersTable.vue

@@ -28,6 +28,7 @@ export default {
   props: {
     users: Array,
   },
+  emits: ["userDeleted"],
   methods: {
     deleteUser: function (userId) {
       axios

frontend/src/views/Home.vue

@@ -9,6 +9,13 @@
     </p>
     <h3>Installed CLI Plugins</h3>
     <ul>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
+          target="_blank"
+          >babel</a
+        >
+      </li>
       <li>
         <a
           href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"

frontend/vue.config.js

-module.exports = {
+const { defineConfig } = require("@vue/cli-service");
+
+module.exports = defineConfig({
+  transpileDependencies: true,
   lintOnSave: false,
-};
+});