├── .browserslistrc
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   ├── logo.png
    │   └── tailwind.css
    ├── views
    │   ├── About.vue
    │   └── Home.vue
    ├── shims-vue.d.ts
    ├── main.ts
    ├── shims-vuex.d.ts
    ├── store
    │   └── index.ts
    ├── router
    │   └── index.ts
    ├── App.vue
    └── components
    │   └── Counter.vue
├── babel.config.js
├── tailwind.config.js
├── postcss.config.js
├── .gitignore
├── README.md
├── .eslintrc.js
├── tsconfig.json
└── package.json


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ErikCH/Vue3TypeScript/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ErikCH/Vue3TypeScript/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/src/assets/tailwind.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | 
3 | @tailwind components;
4 | 
5 | @tailwind utilities;
6 | 


--------------------------------------------------------------------------------
/src/views/About.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="about">
3 |     <h1>Counter: {{$store.getters.counter}}</h1>
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   purge: [],
3 |   theme: {
4 |     extend: {},
5 |   },
6 |   variants: {},
7 |   plugins: [],
8 | }
9 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     'vue-cli-plugin-tailwind/purgecss': {},
5 |     autoprefixer: {}
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/src/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | declare module "*.vue" {
2 |   import { ComponentOptions } from "vue";
3 |   const component: ComponentOptions;
4 |   export default component;
5 | }
6 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { createApp } from "vue";
 2 | import App from "./App.vue";
 3 | import router from "./router";
 4 | import { store } from "./store";
 5 | import "./assets/tailwind.css";
 6 | 
 7 | createApp(App)
 8 |   .use(router)
 9 |   .use(store)
10 |   .mount("#app");
11 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | pnpm-debug.log*
14 | 
15 | # Editor directories and files
16 | .idea
17 | .vscode
18 | *.suo
19 | *.ntvs*
20 | *.njsproj
21 | *.sln
22 | *.sw?
23 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |     <Counter msg="Welcome to Your Vue.js App" />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | // @ is an alias to /src
 9 | import Counter from "@/components/Counter.vue";
10 | 
11 | export default {
12 |   name: "Home",
13 |   components: {
14 |     Counter
15 |   }
16 | };
17 | </script>
18 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ts-vue-3-youtube-ex
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/src/shims-vuex.d.ts:
--------------------------------------------------------------------------------
 1 | import { Store } from "vuex";
 2 | import { State } from "./store";
 3 | 
 4 | declare module "@vue/runtime-core" {
 5 |   interface ComponentCustomProperties {
 6 |     $store: Store<State>;
 7 |   }
 8 | }
 9 | 
10 | // Vuex@4.0.0-beta.1 is missing the typing for `useStore`. See https://github.com/vuejs/vuex/issues/1736
11 | declare module "vuex" {
12 |   export function useStore(key?: string): Store<State>;
13 | }
14 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   'extends': [
 7 |     'plugin:vue/vue3-essential',
 8 |     'eslint:recommended',
 9 |     '@vue/typescript/recommended'
10 |   ],
11 |   parserOptions: {
12 |     ecmaVersion: 2020
13 |   },
14 |   rules: {
15 |     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
16 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/src/store/index.ts:
--------------------------------------------------------------------------------
 1 | import { createStore } from "vuex";
 2 | 
 3 | export type State = { counter: number };
 4 | 
 5 | const state: State = { counter: 0 };
 6 | 
 7 | export const store = createStore({
 8 |   state,
 9 |   mutations: {
10 |     increment(state, payload) {
11 |       state.counter++;
12 |     }
13 |   },
14 |   actions: {
15 |     increment({ commit }) {
16 |       commit("increment");
17 |     }
18 |   },
19 | 
20 |   getters: {
21 |     counter(state) {
22 |       return state.counter;
23 |     }
24 |   },
25 |   modules: {}
26 | });
27 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/router/index.ts:
--------------------------------------------------------------------------------
 1 | import { RouteRecordRaw, createRouter, createWebHistory } from "vue-router";
 2 | import Home from "../views/Home.vue";
 3 | 
 4 | const routes: Array<RouteRecordRaw> = [
 5 |   {
 6 |     path: "/",
 7 |     name: "Home",
 8 |     component: Home
 9 |   },
10 |   {
11 |     path: "/about",
12 |     name: "About",
13 |     // route level code-splitting
14 |     // this generates a separate chunk (about.[hash].js) for this route
15 |     // which is lazy-loaded when the route is visited.
16 |     component: () =>
17 |       import(/* webpackChunkName: "about" */ "../views/About.vue")
18 |   }
19 | ];
20 | 
21 | const router = createRouter({
22 |   history: createWebHistory(process.env.BASE_URL),
23 |   routes
24 | });
25 | 
26 | export default router;
27 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "module": "esnext",
 5 |     "strict": true,
 6 |     "jsx": "preserve",
 7 |     "importHelpers": true,
 8 |     "moduleResolution": "node",
 9 |     "esModuleInterop": true,
10 |     "allowSyntheticDefaultImports": true,
11 |     "sourceMap": true,
12 |     "baseUrl": ".",
13 |     "types": [
14 |       "webpack-env"
15 |     ],
16 |     "paths": {
17 |       "@/*": [
18 |         "src/*"
19 |       ]
20 |     },
21 |     "lib": [
22 |       "esnext",
23 |       "dom",
24 |       "dom.iterable",
25 |       "scripthost"
26 |     ]
27 |   },
28 |   "include": [
29 |     "src/**/*.ts",
30 |     "src/**/*.tsx",
31 |     "src/**/*.vue",
32 |     "tests/**/*.ts",
33 |     "tests/**/*.tsx"
34 |   ],
35 |   "exclude": [
36 |     "node_modules"
37 |   ]
38 | }
39 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app" class="mt-20">
 3 |     <router-view />
 4 |     <div id="nav">
 5 |       <router-link to="/">Home</router-link>|
 6 |       <router-link to="/about">About</router-link>
 7 |     </div>
 8 |   </div>
 9 | </template>
10 | 
11 | <style>
12 | #app {
13 |   text-align: center;
14 |   font-family: Avenir, Helvetica, Arial, sans-serif;
15 |   -webkit-font-smoothing: antialiased;
16 |   -moz-osx-font-smoothing: grayscale;
17 |   text-align: center;
18 |   color: #2c3e50;
19 | }
20 | 
21 | #nav {
22 |   position: absolute;
23 |   left: 0;
24 |   right: 0;
25 |   margin: auto;
26 |   bottom: 0;
27 |   padding: 30px;
28 |   text-align: center;
29 | }
30 | 
31 | #nav a {
32 |   font-weight: bold;
33 |   color: #2c3e50;
34 | }
35 | 
36 | #nav a.router-link-exact-active {
37 |   color: #42b983;
38 | }
39 | </style>
40 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ts-vue-3-youtube-ex",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.6.5",
12 |     "vue": "^3.0.0-rc.4",
13 |     "vue-router": "^4.0.0-beta.4",
14 |     "vuex": "^4.0.0-beta.4"
15 |   },
16 |   "devDependencies": {
17 |     "@typescript-eslint/eslint-plugin": "^2.33.0",
18 |     "@typescript-eslint/parser": "^2.33.0",
19 |     "@vue/cli-plugin-babel": "~4.4.0",
20 |     "@vue/cli-plugin-eslint": "~4.4.0",
21 |     "@vue/cli-plugin-router": "~4.4.0",
22 |     "@vue/cli-plugin-typescript": "~4.4.0",
23 |     "@vue/cli-plugin-vuex": "~4.4.0",
24 |     "@vue/cli-service": "~4.4.0",
25 |     "@vue/compiler-sfc": "^3.0.0-beta.1",
26 |     "@vue/eslint-config-typescript": "^5.0.2",
27 |     "eslint": "^6.7.2",
28 |     "eslint-plugin-vue": "^7.0.0-alpha.0",
29 |     "typescript": "~3.9.3",
30 |     "vue-cli-plugin-tailwind": "~1.4.1",
31 |     "vue-cli-plugin-vue-next": "~0.1.3"
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/src/components/Counter.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <div class="bg-gray-300 h-64 w-4/6 mx-auto shadow-md flex flex-col justify-center items-center">
 4 |       <h3 class="text-xl font-semibold">Increment Counter</h3>
 5 |       <button
 6 |         class="bg-red-500 text-blue-900 border rounded-lg px-8 m-4 h-10 text-2xl font-bold focus:outline-none"
 7 |         @click="inc()"
 8 |       >Press Me</button>
 9 |       <h5 class="text-3xl">Counter: {{count.counter}}</h5>
10 |     </div>
11 |   </div>
12 | </template>
13 | 
14 | <script lang="ts">
15 | import { defineComponent, ref } from "vue";
16 | import { useStore } from "vuex";
17 | 
18 | export default defineComponent({
19 |   setup() {
20 |     const store = useStore();
21 |     const count = ref(store.state);
22 |     const inc = () => {
23 |       store.commit("increment");
24 |     };
25 | 
26 |     return {
27 |       count,
28 |       inc,
29 |     };
30 |   },
31 |   name: "HelloWorld",
32 |   props: {
33 |     msg: String,
34 |   },
35 |   methods: {},
36 | });
37 | </script>
38 | 
39 | <!-- Add "scoped" attribute to limit CSS to this component only -->
40 | <style scoped>
41 | h3 {
42 |   margin: 40px 0 0;
43 | }
44 | ul {
45 |   list-style-type: none;
46 |   padding: 0;
47 | }
48 | li {
49 |   display: inline-block;
50 |   margin: 0 10px;
51 | }
52 | a {
53 |   color: #42b983;
54 | }
55 | </style>
56 | 


--------------------------------------------------------------------------------