├── .browserslistrc
├── public
    ├── favicon.ico
    └── index.html
├── babel.config.js
├── src
    ├── main.ts
    ├── shims-vue.d.ts
    ├── products.ts
    ├── App.vue
    ├── product-list.vue
    └── product-detail.vue
├── .prettierrc
├── .editorconfig
├── .gitignore
├── README.md
├── tsconfig.json
├── package.json
└── .eslintrc.js


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


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/johnpapa/vue-ts/HEAD/public/favicon.ico


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


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue';
2 | import App from './app.vue';
3 | 
4 | createApp(App).mount('#app');
5 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "bracketSpacing": true,
3 |   "printWidth": 80,
4 |   "singleQuote": true,
5 |   "tabWidth": 2,
6 |   "trailingComma": "all",
7 |   "useTabs": false
8 | }
9 | 


--------------------------------------------------------------------------------
/src/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.vue' {
2 |   import { defineComponent } from 'vue';
3 | 
4 |   const component: ReturnType<typeof defineComponent>;
5 |   export default component;
6 | }
7 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,ts,tsx,vue}]
2 | indent_style = space
3 | indent_size = 2
4 | end_of_line = lf
5 | trim_trailing_whitespace = true
6 | insert_final_newline = true
7 | max_line_length = 100
8 | 


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-ts
 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/products.ts:
--------------------------------------------------------------------------------
 1 | export class Product {
 2 |   constructor(
 3 |     public id: number,
 4 |     public name: string = '',
 5 |     public description: string = '',
 6 |     public quantity: number = 0,
 7 |   ) {}
 8 | }
 9 | 
10 | export const products: Product[] = [
11 |   new Product(
12 |     10,
13 |     'Strawberries',
14 |     '16oz package of fresh organic strawberries',
15 |     1,
16 |   ),
17 |   new Product(20, 'Sliced bread', 'Loaf of fresh sliced wheat bread', 1),
18 |   new Product(30, 'Apples', 'Bag of 7 fresh McIntosh apples', 1),
19 | ];
20 | 


--------------------------------------------------------------------------------
/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/App.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | import { defineComponent } from 'vue';
 3 | import ProductList from '@/product-list.vue';
 4 | 
 5 | export default defineComponent({
 6 |   name: 'App',
 7 |   components: {
 8 |     ProductList,
 9 |   },
10 | });
11 | </script>
12 | 
13 | <template>
14 |   <ProductList />
15 | </template>
16 | 
17 | <style lang="scss">
18 | #app {
19 |   font-family: Avenir, Helvetica, Arial, sans-serif;
20 |   -webkit-font-smoothing: antialiased;
21 |   -moz-osx-font-smoothing: grayscale;
22 |   text-align: center;
23 |   color: #2c3e50;
24 | }
25 | 
26 | #nav {
27 |   padding: 30px;
28 | 
29 |   a {
30 |     font-weight: bold;
31 |     color: #2c3e50;
32 | 
33 |     &.router-link-exact-active {
34 |       color: #42b983;
35 |     }
36 |   }
37 | }
38 | </style>
39 | 


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


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-ts",
 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-0"
13 |   },
14 |   "devDependencies": {
15 |     "@typescript-eslint/eslint-plugin": "^2.33.0",
16 |     "@typescript-eslint/parser": "^2.33.0",
17 |     "@vue/cli-plugin-babel": "~4.5.0",
18 |     "@vue/cli-plugin-eslint": "~4.5.0",
19 |     "@vue/cli-plugin-typescript": "^4.5.6",
20 |     "@vue/cli-service": "~4.5.0",
21 |     "@vue/compiler-sfc": "^3.0.0-0",
22 |     "@vue/eslint-config-airbnb": "^5.1.0",
23 |     "@vue/eslint-config-prettier": "^6.0.0",
24 |     "@vue/eslint-config-typescript": "^5.0.2",
25 |     "babel-eslint": "^10.1.0",
26 |     "eslint": "^6.7.2",
27 |     "eslint-plugin-import": "^2.22.1",
28 |     "eslint-plugin-prettier": "^3.1.4",
29 |     "eslint-plugin-vue": "^7.0.0-0",
30 |     "node-sass": "^4.12.0",
31 |     "sass-loader": "^8.0.2",
32 |     "typescript": "~3.9.3"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/src/product-list.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ul>
 3 |     <li v-for="product in productsList" :key="product.id">
 4 |       <div @click="selectProduct(product)">
 5 |         {{ product.name }}
 6 |       </div>
 7 |     </li>
 8 |   </ul>
 9 |   <div v-if="selectedProduct.id">
10 |     <ProductDetail :product="selectedProduct" />
11 |   </div>
12 | </template>
13 | 
14 | <script lang="ts">
15 | import { defineComponent, reactive, toRefs } from 'vue';
16 | import { Product, products } from '@/products';
17 | import ProductDetail from '@/product-detail.vue';
18 | 
19 | interface ComponentState {
20 |   productsList: Product[];
21 |   selectedProduct: Product;
22 | }
23 | 
24 | export default defineComponent({
25 |   name: 'ProductList',
26 |   components: { ProductDetail },
27 |   setup() {
28 |     const state: ComponentState = reactive({
29 |       productsList: products as Product[],
30 |       selectedProduct: new Product(0),
31 |     });
32 | 
33 |     function selectProduct(p: Product) {
34 |       state.selectedProduct = p;
35 |     }
36 | 
37 |     return {
38 |       ...toRefs(state),
39 |       selectProduct,
40 |     };
41 |   },
42 | });
43 | </script>
44 | 
45 | <style>
46 | li {
47 |   cursor: pointer;
48 | }
49 | </style>
50 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 | 
 4 |   env: {
 5 |     node: true
 6 |   },
 7 | 
 8 |   extends: ["@vue/airbnb", "plugin:vue/vue3-essential", "@vue/prettier", "@vue/typescript"],
 9 |   plugins: ["prettier"],
10 | 
11 |   // watch this for explaining why some of this is here
12 |   // https://www.youtube.com/watch?time_continue=239&v=YIvjKId9m2c
13 |   rules: {
14 |     "no-console": "off", // process.env.NODE_ENV === 'production' ? 'error' : 'off',
15 |     "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
16 |     "consistent-return": 0,
17 |     quotes: [2, "single", { avoidEscape: true, allowTemplateLiterals: true }],
18 |     "max-classes-per-file": "off",
19 |     "no-unused-vars": "off",
20 |     "no-useless-constructor": "off",
21 |     "no-empty-function": "off",
22 |     "@typescript-eslint/no-useless-constructor": "error",
23 |     "@typescript-eslint/no-unused-vars": ["error"],
24 |     "lines-between-class-members": "off",
25 |     "prettier/prettier": [
26 |       "error",
27 |       {
28 |         trailingComma: "all",
29 |         singleQuote: true,
30 |         printWidth: 80
31 |       }
32 |     ],
33 |     "vue/no-unused-components": [
34 |       "error",
35 |       {
36 |         ignoreWhenBindingPresent: true
37 |       }
38 |     ]
39 |   },
40 | 
41 |   parserOptions: {
42 |     parser: "@typescript-eslint/parser"
43 |   }
44 | };
45 | 


--------------------------------------------------------------------------------
/src/product-detail.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | import { defineComponent, reactive, toRefs, watch } from 'vue';
 3 | import { Product } from '@/products';
 4 | 
 5 | interface Props {
 6 |   product: Product;
 7 | }
 8 | 
 9 | interface ComponentState {
10 |   productClone: Product;
11 | }
12 | 
13 | export default defineComponent({
14 |   name: 'ProductDetail',
15 |   props: {
16 |     product: {
17 |       type: Product,
18 |       default() {
19 |         return new Product(0);
20 |       },
21 |     },
22 |   },
23 |   setup(props: Props) {
24 |     const { product } = toRefs(props);
25 |     const state: ComponentState = reactive({
26 |       productClone: { ...product.value },
27 |     });
28 | 
29 |     watch(product, (/* newValue, oldValue */) => {
30 |       if (product.value && product.value.id) {
31 |         state.productClone = { ...product.value };
32 |       }
33 |     });
34 | 
35 |     return { ...toRefs(state) };
36 |   },
37 | });
38 | </script>
39 | 
40 | <template>
41 |   <div>
42 |     <div>
43 |       <label class="label" for="id">id</label>
44 |       <input
45 |         class="input"
46 |         name="id"
47 |         placeholder="99999"
48 |         readonly
49 |         type="text"
50 |         v-model="productClone.id"
51 |       />
52 |     </div>
53 |     <div class="field">
54 |       <label class="label" for="name">name</label>
55 |       <input
56 |         class="input"
57 |         name="name"
58 |         placeholder="Oranges"
59 |         type="text"
60 |         v-model="productClone.name"
61 |       />
62 |     </div>
63 |     <div class="field">
64 |       <label class="label" for="description">description</label>
65 |       <input
66 |         class="input"
67 |         name="description"
68 |         placeholder="box"
69 |         type="text"
70 |         v-model="productClone.description"
71 |       />
72 |     </div>
73 |     <div class="field">
74 |       <label class="label" for="quantity">quantity</label>
75 |       <input
76 |         class="input"
77 |         name="quantity"
78 |         placeholder="1"
79 |         type="number"
80 |         min="1"
81 |         max="100"
82 |         v-model="productClone.quantity"
83 |       />
84 |     </div>
85 |   </div>
86 | </template>
87 | 


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