Upgrade to Vue 3

.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead

.eslintrc.js

@@ -0,0 +1,14 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: ["plugin:vue/vue3-essential", "eslint:recommended", "@vue/prettier"],
+  parserOptions: {
+    ecmaVersion: 2020,
+  },
+  rules: {
+    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+  },
+};

.github/workflows/main.yml

@@ -5,6 +5,7 @@ on:
     branches: master
     paths-ignore:
       - "docs/**"
+
   pull_request:
     branches: master
     paths-ignore:

README.md

@@ -1,8 +1,7 @@
 # Vue Quickstart
-> Starter template for a Vue 2 site - including docs and CI deploy to GH Pages
+> Starter template for a Vue 3 site - including docs and CI deploy to GH Pages
 
 <!-- Badges generated with: https://michaelcurrin.github.io/badge-generator/ -->
-
 [![GH Pages Deploy](https://github.com/MichaelCurrin/vue-quickstart/workflows/GH%20Pages%20Deploy/badge.svg)](https://github.com/MichaelCurrin/vue-quickstart/actions)
 [![GitHub tag](https://img.shields.io/github/tag/MichaelCurrin/vue-quickstart)](https://github.com/MichaelCurrin/vue-js-quickstart/tags/)
 [![License](https://img.shields.io/badge/License-MIT-blue)](#license)
@@ -46,7 +45,7 @@ After you've looked at the demo screenshot and site, you are welcome to create y
 
 ## About
 
-### What is Vue? 
+### What is Vue?
 
 > Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
 
@@ -67,6 +66,8 @@ See [Vue](https://github.com/MichaelCurrin/learn-to-code/blob/master/en/topics/s
 This project was created using the Vue CLI:
 
 ```sh
+$ vue create my-project
+$ # OR if not installed.
 $ npx @vue/cli create my-project
 ```
 
@@ -102,6 +103,7 @@ That based on what you get in the Vue Router setup.
 - Vue-based projects:
     - [Vue TypeScript Quickstart](https://github.com/MichaelCurrin/vue-typescript-quickstart) - like this project but with TypeScript added.
     - [Vue Router Quickstart](https://github.com/MichaelCurrin/vue-router-quickstart) - like this project but with Vue Router added for a multi-page site.
+    - [Vue Vuex Quickstart](https://github.com/MichaelCurrin/vue-vuex-quickstart) - like this project but with Vuex added.
     - [VuePress Quickstart](https://github.com/MichaelCurrin/vuepress-quickstart) - using VuePress, a static site generator built on a Vue.
     - [Nuxt Default Quickstart](https://github.com/MichaelCurrin/nuxt-default-quickstart) - using Nuxt, a mix between a SPA and a static site generator that is built on Vue.
     - [Vue Frontend Quickstart](https://github.com/MichaelCurrin/vue-frontend-quickstart) - a simple site that uses Vue on the frontend without Node or build step.

docs/usage.md

@@ -7,7 +7,7 @@
 Compile and start a hot-reloading dev server.
 
 ```sh
-$ yarn serve
+$ yarn start
 ```
 
 Open in the browser:
@@ -26,15 +26,15 @@ $ yarn build
 Now you can view the output in the unversioned `dist` directory.
 
 
-## Lint
+## Lint and format
 
 Detect errors and warnings and fix where possible.
 
 ```sh
 $ yarn lint:fix
 ```
 
-Run linter but not fix up. Warnings will pass, but any errors will cause an error exit status - this is useful for a CI/CD flow.
+Run checks but do not fix up. Warnings will pass, but any errors will cause an error exit status - this is useful for a CI/CD flow.
 
 ```sh
 $ yarn lint:check

package.json

@@ -12,41 +12,18 @@
     "postversion": "git push --follow-tags"
   },
   "dependencies": {
-    "core-js": "^3.6.4",
-    "vue": "^2.6.11"
+    "vue": "^3.0.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.6",
-    "@vue/cli-plugin-eslint": "~4.5.6",
-    "@vue/cli-service": "~4.5.6",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "@vue/compiler-sfc": "^3.0.0",
     "@vue/eslint-config-prettier": "^6.0.0",
-    "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-vue": "^6.2.2",
-    "prettier": "^2.1.1",
-    "vue-template-compiler": "^2.6.11"
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-vue": "^7.0.0",
+    "prettier": "^2.2.1"
   },
   "author": "MichaelCurrin",
-  "license": "MIT",
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended",
-      "@vue/prettier"
-    ],
-    "parserOptions": {
-      "parser": "babel-eslint"
-    },
-    "rules": {}
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead"
-  ]
+  "license": "MIT"
 }

src/App.vue

@@ -1,8 +1,7 @@
 <template>
-  <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png" />
-    <HelloWorld msg="Vue.js Quickstart" />
-  </div>
+  <img alt="Vue logo" src="./assets/logo.png" />
+
+  <HelloWorld msg="Vue.js Quickstart" />
 </template>
 
 <script>

src/components/HelloWorld.vue

@@ -6,22 +6,22 @@
     <p>
       <a href="https://github.com/MichaelCurrin/vue-quickstart/generate">
         <img
-          src="https://img.shields.io/badge/Use_this_template-41b883?style=for-the-badge&logo=github"
+          src="https://img.shields.io/badge/Generate-Use_this_template-41b883?logo=github&style=for-the-badge&labelColor=35495e"
           alt="Use this template"
           title="Use this template"
         />
       </a>
       <br />
       <a href="https://github.com/MichaelCurrin/vue-quickstart/">
         <img
-          src="https://img.shields.io/badge/Repo-Vue_quickstart-41b883?logo=github&labelColor=35495e"
+          src="https://img.shields.io/badge/Repo-Vue_quickstart-41b883?logo=github&style=flat-square&labelColor=35495e"
           alt="GitHub repo"
           title="GitHub repo"
         />
       </a>
       <a href="https://www.npmjs.com/package/vue">
         <img
-          src="https://img.shields.io/github/package-json/dependency-version/MichaelCurrin/vue-quickstart/vue?logo=vue.js&color=41b883&labelColor=35495e"
+          src="https://img.shields.io/github/package-json/dependency-version/MichaelCurrin/vue-quickstart/vue?logo=vue.js&style=flat-square&color=41b883&labelColor=35495e"
           alt="package - vue"
           title="package - vue"
         />
@@ -40,14 +40,6 @@
 
     <h3>Installed CLI Plugins</h3>
     <ul>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
-          target="_blank"
-          rel="noopener"
-          >babel</a
-        >
-      </li>
       <li>
         <a
           href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"

src/main.js

@@ -1,9 +1,4 @@
-import Vue from "vue";
-
+import { createApp } from "vue";
 import App from "./App.vue";
 
-Vue.config.productionTip = false;
-
-new Vue({
-  render: (h) => h(App),
-}).$mount("#app");
+createApp(App).mount("#app");