first commit

Author: Erik Hanchett

.eslintrc.js

@@ -4,7 +4,7 @@ module.exports = {
     node: true
   },
   'extends': [
-    'plugin:vue/essential',
+    'plugin:vue/vue3-essential',
     'eslint:recommended',
     '@vue/typescript/recommended'
   ],

package-lock.json

@@ -9,9 +9,9 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
-    "vue": "^2.6.11",
-    "vue-router": "^3.2.0",
-    "vuex": "^3.4.0"
+    "vue": "^3.0.0-rc.4",
+    "vue-router": "^4.0.0-beta.4",
+    "vuex": "^4.0.0-beta.4"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^2.33.0",
@@ -22,10 +22,12 @@
     "@vue/cli-plugin-typescript": "~4.4.0",
     "@vue/cli-plugin-vuex": "~4.4.0",
     "@vue/cli-service": "~4.4.0",
+    "@vue/compiler-sfc": "^3.0.0-beta.1",
     "@vue/eslint-config-typescript": "^5.0.2",
     "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^6.2.2",
+    "eslint-plugin-vue": "^7.0.0-alpha.0",
     "typescript": "~3.9.3",
-    "vue-template-compiler": "^2.6.11"
+    "vue-cli-plugin-tailwind": "~1.4.1",
+    "vue-cli-plugin-vue-next": "~0.1.3"
   }
 }

package.json

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    'vue-cli-plugin-tailwind/purgecss': {},
+    autoprefixer: {}
+  }
+}

postcss.config.js

@@ -1,15 +1,16 @@
 <template>
-  <div id="app">
+  <div id="app" class="mt-20">
+    <router-view />
     <div id="nav">
-      <router-link to="/">Home</router-link> |
+      <router-link to="/">Home</router-link>|
       <router-link to="/about">About</router-link>
     </div>
-    <router-view/>
   </div>
 </template>
 
 <style>
 #app {
+  text-align: center;
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -18,7 +19,13 @@
 }
 
 #nav {
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin: auto;
+  bottom: 0;
   padding: 30px;
+  text-align: center;
 }
 
 #nav a {

src/App.vue

@@ -0,0 +1,5 @@
+@tailwind base;
+
+@tailwind components;
+
+@tailwind utilities;

src/assets/tailwind.css

@@ -0,0 +1,55 @@
+<template>
+  <div class="hello">
+    <div class="bg-gray-300 h-64 w-4/6 mx-auto shadow-md flex flex-col justify-center items-center">
+      <h3 class="text-xl font-semibold">Increment Counter</h3>
+      <button
+        class="bg-red-500 text-blue-900 border rounded-lg px-8 m-4 h-10 text-2xl font-bold focus:outline-none"
+        @click="inc()"
+      >Press Me</button>
+      <h5 class="text-3xl">Counter: {{count.counter}}</h5>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+import { useStore } from "vuex";
+
+export default defineComponent({
+  setup() {
+    const store = useStore();
+    const count = ref(store.state);
+    const inc = () => {
+      store.commit("increment");
+    };
+
+    return {
+      count,
+      inc,
+    };
+  },
+  name: "HelloWorld",
+  props: {
+    msg: String,
+  },
+  methods: {},
+});
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

src/components/Counter.vue

@@ -1,12 +1,10 @@
-import Vue from 'vue'
-import App from './App.vue'
-import router from './router'
-import store from './store'
+import { createApp } from "vue";
+import App from "./App.vue";
+import router from "./router";
+import { store } from "./store";
+import "./assets/tailwind.css";
 
-Vue.config.productionTip = false
-
-new Vue({
-  router,
-  store,
-  render: h => h(App)
-}).$mount('#app')
+createApp(App)
+  .use(router)
+  .use(store)
+  .mount("#app");

src/components/HelloWorld.vue

@@ -1,29 +1,26 @@
-import Vue from 'vue'
-import VueRouter, { RouteConfig } from 'vue-router'
-import Home from '../views/Home.vue'
+import { RouteRecordRaw, createRouter, createWebHistory } from "vue-router";
+import Home from "../views/Home.vue";
 
-Vue.use(VueRouter)
-
-  const routes: Array<RouteConfig> = [
+const routes: Array<RouteRecordRaw> = [
   {
-    path: '/',
-    name: 'Home',
+    path: "/",
+    name: "Home",
     component: Home
   },
   {
-    path: '/about',
-    name: 'About',
+    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/About.vue')
+    component: () =>
+      import(/* webpackChunkName: "about" */ "../views/About.vue")
   }
-]
+];
 
-const router = new VueRouter({
-  mode: 'history',
-  base: process.env.BASE_URL,
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
   routes
-})
+});
 
-export default router
+export default router;

src/main.ts

@@ -1,4 +1,5 @@
-declare module '*.vue' {
-  import Vue from 'vue'
-  export default Vue
+declare module "*.vue" {
+  import { ComponentOptions } from "vue";
+  const component: ComponentOptions;
+  export default component;
 }

src/router/index.ts

@@ -0,0 +1,13 @@
+import { Store } from "vuex";
+import { State } from "./store";
+
+declare module "@vue/runtime-core" {
+  interface ComponentCustomProperties {
+    $store: Store<State>;
+  }
+}
+
+// [email protected] is missing the typing for `useStore`. See https://github.com/vuejs/vuex/issues/1736
+declare module "vuex" {
+  export function useStore(key?: string): Store<State>;
+}

src/shims-tsx.d.ts

@@ -1,15 +1,26 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
+import { createStore } from "vuex";
 
-Vue.use(Vuex)
+export type State = { counter: number };
 
-export default new Vuex.Store({
-  state: {
-  },
+const state: State = { counter: 0 };
+
+export const store = createStore({
+  state,
   mutations: {
+    increment(state, payload) {
+      state.counter++;
+    }
   },
   actions: {
+    increment({ commit }) {
+      commit("increment");
+    }
+  },
+
+  getters: {
+    counter(state) {
+      return state.counter;
+    }
   },
-  modules: {
-  }
-})
+  modules: {}
+});

src/shims-vue.d.ts

@@ -1,5 +1,5 @@
 <template>
   <div class="about">
-    <h1>This is an about page</h1>
+    <h1>Counter: {{$store.getters.counter}}</h1>
   </div>
 </template>

src/shims-vuex.d.ts

@@ -1,18 +1,17 @@
 <template>
   <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <Counter msg="Welcome to Your Vue.js App" />
   </div>
 </template>
 
 <script>
 // @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
+import Counter from "@/components/Counter.vue";
 
 export default {
-  name: 'Home',
+  name: "Home",
   components: {
-    HelloWorld
+    Counter
   }
-}
+};
 </script>

src/store/index.ts

@@ -0,0 +1,8 @@
+module.exports = {
+  purge: [],
+  theme: {
+    extend: {},
+  },
+  variants: {},
+  plugins: [],
+}