├── .babelrc ├── .gitattributes ├── .gitignore ├── .vscode └── settings.json ├── LICENSE ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── src ├── @types │ ├── jsx.d.ts │ └── vue-shims.d.ts ├── assets │ ├── icons │ │ └── favicon.ico │ └── images │ │ └── logo-vue.png ├── components │ ├── app │ │ └── app.vue │ └── hello-word │ │ ├── hello-word-extend.vue │ │ ├── hello-word-tsx.scss │ │ ├── hello-word-tsx.tsx │ │ └── hello-word.vue ├── index.scss ├── index.ts └── store │ ├── hello │ ├── hello.ts │ └── index.ts │ ├── index.ts │ ├── state-types.ts │ └── store.ts ├── tsconfig.json ├── webpack.config.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false 5 | }], 6 | "stage-2" 7 | ], 8 | "plugins": [ 9 | "transform-runtime", 10 | "transform-vue-jsx" 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | 7 | # Standard to msysgit 8 | *.doc diff=astextplain 9 | *.DOC diff=astextplain 10 | *.docx diff=astextplain 11 | *.DOCX diff=astextplain 12 | *.dot diff=astextplain 13 | *.DOT diff=astextplain 14 | *.pdf diff=astextplain 15 | *.PDF diff=astextplain 16 | *.rtf diff=astextplain 17 | *.RTF diff=astextplain 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | src/**/*.js 3 | src/**/*.css 4 | dist -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | // Place your settings in this file to overwrite default and user settings. 2 | { 3 | "files.associations": { 4 | "*.vue": "vue" 5 | }, 6 | "tslint.autoFixOnSave": true 7 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Israel Zablianov 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue Vuex TypeScript Webpack seed 2 | 3 | This seed project includes some of the 'hot' and latests web technologies such as [TypeScript](https://www.typescriptlang.org/), [Vue](https://vuejs.org), [Vuex](https://vuex.vuejs.org/en/),[Vuex-Typescript](https://github.com/istrib/vuex-typescript), [Webpack](https://webpack.js.org/), [SASS](https://sass-lang.com/) and more, all working together beautifully. 4 | 5 | This project is simple enough to understand with examples for every needed part e.g. hello component with typescript and property decorators, hello store with `Vuex` and `Vuex-Typescript` and render function with tsx support. 6 | 7 | # Getting Started 8 | 9 | Let's run some commands. 10 | 11 | ```sh 12 | npm install // or yarn install 13 | npm run build 14 | npm start 15 | ``` 16 | 17 | In this point you should have zero errors (otherwise, please open an issue or contact me for help) and you can start coding. 18 | 19 | 20 | For readable and maintainable code, please save the following structure: 21 | ```txt 22 | src/ 23 | ├─ components/ 24 | | └─ specificComponentFolder 25 | └─ store/ 26 | └─ specificModuleStateFolder/ 27 | ``` 28 | 29 | The project is configured with webpack, and webpack-dev-server with hot reloading.
30 | So all you need to do is save the changes and the page will refresh automatically. 31 | 32 | 33 | # Using decorators to define a component 34 | 35 | This seed project contains example of components, defined using [decorators](https://www.typescriptlang.org/docs/handbook/decorators.html), [vue-class-component](https://github.com/vuejs/vue-class-component) and [vue-property-decorator](https://github.com/kaorun343/vue-property-decorator). 36 | 37 | 38 | ```ts 39 | import { Vue, Component, Prop } from "vue-property-decorator"; 40 | 41 | @Component() 42 | export default class HelloDecorator extends Vue { 43 | 44 | @Prop(type: String, default: "") 45 | name: string; 46 | 47 | @Prop({ type: Number, default: 1 }) 48 | initialEnthusiasm: number; 49 | 50 | enthusiasm = this.initialEnthusiasm; 51 | 52 | increment() { 53 | this.enthusiasm++; 54 | } 55 | 56 | decrement() { 57 | this.enthusiasm--; 58 | } 59 | 60 | get exclamationMarks(): string { 61 | return Array(this.enthusiasm + 1).join('!'); 62 | } 63 | } 64 | ``` 65 | 66 | Instead of using `Vue.extend` to define our component, we create a class extending `Vue` and decorate it using the `@Component` decorator from the `vue-class-component` package (which was re-exported from the `vue-property-decorator` package). 67 | 68 | Properties are defined by prefixing instance variables with the `@Prop()` decorator from the `vue-property-decorator` package. 69 | 70 | Regular instance variables, such as `enthusiasm` in our example, are automatically made available for data binding to the template, just as if they had been defined in the `data` field. 71 | Note that all variables must be set to a value other than `undefined` for the binding to work. 72 | 73 | Similarly, methods such as `increment` are treated as if they had been written in the `methods` field, and are automatically made available for the template. 74 | 75 | Finally, computed properties like `exclamationMarks` are simply written as `get` accessors. 76 | 77 | # Using render functions & tsx to define a component 78 | 79 | Vue also supports [render functions & jsx/tsx](https://vuejs.org/v2/guide/render-function.html).
80 | If you are familiar with [React](https://reactjs.org/) you probably know how great it is. 81 | 82 | ```tsx 83 | import { Vue, Component, Prop } from "vue-property-decorator"; 84 | import { CreateElement, VNode } from "vue/types"; 85 | import "./hello-word-tsx.scss"; 86 | 87 | @Component({ 88 | }) 89 | export default class HelloWord extends Vue { 90 | 91 | @Prop({ type: String, default: "" }) 92 | name: string; 93 | 94 | @Prop({ type: Number, default: 1 }) 95 | enthusiasmLevel: number; 96 | 97 | public get helloMessage(): string { 98 | return "Hello " + this.name + this.getExclamationMarks(this.enthusiasmLevel); 99 | } 100 | 101 | public getExclamationMarks(numChars: number): string { 102 | return Array(numChars + 1).join('!'); 103 | } 104 | 105 | public onDecrement() { 106 | this.$emit("onDecrement"); 107 | } 108 | 109 | public onIncrement() { 110 | this.$emit("onIncrement"); 111 | } 112 | 113 | public render(h: CreateElement): VNode { 114 | return ( 115 |
116 |
117 | {this.helloMessage} 118 |
119 |
120 | 121 | 122 |
123 |
124 | ); 125 | } 126 | } 127 | ``` 128 | As you can see, this is no longer a single file with template, style and script.
129 | The render function is alternative to templates and the style is imported from another file.
130 | Sometimes it is mandatory to use tsx elements so in this seed project you have the ability
131 | to use both, tsx files and vue files. 132 | 133 | This seed project is based on Microsoft-TypeScript-Vue-Starter -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | vue-vuex-typescript-webpack-seed 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-vuex-typescript-webpack-seed", 3 | "version": "1.0.0", 4 | "private": true, 5 | "description": "An actual working seed of vue, vuex, typescript and webpack", 6 | "main": "index.html", 7 | "scripts": { 8 | "build": "webpack", 9 | "test": "echo \"Error: no test specified\" && exit 1", 10 | "start": "webpack-dev-server" 11 | }, 12 | "keywords": [], 13 | "author": { 14 | "name": "Israel Zablianov", 15 | "url": "https://github.com/IsraelZablianov/vue-vuex-typescript-webpack-seed" 16 | }, 17 | "license": "MIT", 18 | "dependencies": { 19 | "vue": "^2.5.2", 20 | "vuex": "^3.0.1", 21 | "vue-property-decorator": "^6.0.0", 22 | "vuex-typescript": "^3.0.2" 23 | }, 24 | "devDependencies": { 25 | "@types/node": "^9.4.6", 26 | "awesome-typescript-loader": "^3.0.0", 27 | "babel-core": "^6.22.1", 28 | "babel-helper-vue-jsx-merge-props": "2.0.0", 29 | "babel-loader": "^7.1.1", 30 | "babel-plugin-syntax-jsx": "^6.18.0", 31 | "babel-plugin-transform-runtime": "^6.22.0", 32 | "babel-plugin-transform-vue-jsx": "^3.5.0", 33 | "babel-preset-env": "^1.3.2", 34 | "babel-preset-stage-2": "^6.22.0", 35 | "babel-register": "^6.22.0", 36 | "copy-webpack-plugin": "^4.5.0", 37 | "css-loader": "^0.28.10", 38 | "file-loader": "^1.1.11", 39 | "node-sass": "^4.7.2", 40 | "prettier": "1.12.1", 41 | "sass-loader": "^6.0.7", 42 | "style-loader": "^0.20.2", 43 | "ts-loader": "^3.5.0", 44 | "typescript": "2.6.1", 45 | "url-loader": "^1.0.1", 46 | "vue-class-component": "^6.0.0", 47 | "vue-loader": "^13.3.0", 48 | "vue-template-compiler": "^2.5.2", 49 | "webpack": "^3.6.0", 50 | "webpack-dev-server": "^2.11.1" 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /src/@types/jsx.d.ts: -------------------------------------------------------------------------------- 1 | import Vue, { VNode } from "vue" 2 | 3 | declare global { 4 | namespace JSX { 5 | interface Element extends VNode {} 6 | interface ElementClass extends Vue {} 7 | interface IntrinsicElements { 8 | [elem: string]: any 9 | } 10 | } 11 | } -------------------------------------------------------------------------------- /src/@types/vue-shims.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.vue" { 2 | import Vue from "vue"; 3 | export default Vue; 4 | } -------------------------------------------------------------------------------- /src/assets/icons/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IsraelZablianov/vue-vuex-typescript-webpack-seed/140ed457e750d4897049ccd4b5ecf0ab0cc56a4a/src/assets/icons/favicon.ico -------------------------------------------------------------------------------- /src/assets/images/logo-vue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IsraelZablianov/vue-vuex-typescript-webpack-seed/140ed457e750d4897049ccd4b5ecf0ab0cc56a4a/src/assets/images/logo-vue.png -------------------------------------------------------------------------------- /src/components/app/app.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 48 | 49 | 69 | -------------------------------------------------------------------------------- /src/components/hello-word/hello-word-extend.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 47 | 48 | 64 | -------------------------------------------------------------------------------- /src/components/hello-word/hello-word-tsx.scss: -------------------------------------------------------------------------------- 1 | .hello { 2 | text-align: center; 3 | margin: 20px; 4 | font-size: 48px; 5 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 6 | 7 | button { 8 | margin-left: 25px; 9 | margin-right: 25px; 10 | font-size: 40px; 11 | min-width: 50px; 12 | } 13 | } 14 | 15 | -------------------------------------------------------------------------------- /src/components/hello-word/hello-word-tsx.tsx: -------------------------------------------------------------------------------- 1 | 2 | import { Vue, Component, Prop } from "vue-property-decorator"; 3 | import { CreateElement, VNode } from "vue/types"; 4 | import "./hello-word-tsx.scss"; 5 | 6 | @Component({ 7 | }) 8 | export default class HelloWord extends Vue { 9 | 10 | @Prop({ type: String, default: "" }) 11 | name: string; 12 | 13 | @Prop({ type: Number, default: 1 }) 14 | enthusiasmLevel: number; 15 | 16 | public get helloMessage(): string { 17 | return "Hello " + this.name + this.getExclamationMarks(this.enthusiasmLevel); 18 | } 19 | 20 | public getExclamationMarks(numChars: number): string { 21 | return Array(numChars + 1).join('!'); 22 | } 23 | 24 | public onDecrement() { 25 | this.$emit("onDecrement"); 26 | } 27 | 28 | public onIncrement() { 29 | this.$emit("onIncrement"); 30 | } 31 | 32 | public render(h: CreateElement): VNode { 33 | return ( 34 |
35 |
36 | {this.helloMessage} 37 |
38 |
39 | 40 | 41 |
42 |
43 | ); 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/components/hello-word/hello-word.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 42 | 43 | 59 | -------------------------------------------------------------------------------- /src/index.scss: -------------------------------------------------------------------------------- 1 | html, body { 2 | height: 100%; 3 | margin: 0; 4 | width: 100%; 5 | } -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import Vuex from "vuex"; 3 | import App from "./components/app/app.vue"; 4 | import store from "./store"; 5 | import "./index.scss"; 6 | 7 | new Vue({ 8 | el: "#app", 9 | store, 10 | template: ` 11 | 12 | `, 13 | components: { 14 | App 15 | } 16 | }); 17 | -------------------------------------------------------------------------------- /src/store/hello/hello.ts: -------------------------------------------------------------------------------- 1 | import { ActionContext, Store } from "vuex"; 2 | import { getStoreAccessors } from "vuex-typescript"; 3 | import { GlobalState } from "../state-types"; 4 | 5 | export interface HelloState { 6 | enthusiasmLevel: number; 7 | } 8 | 9 | type HelloContext = ActionContext; 10 | 11 | export const helloModule = { 12 | state: { 13 | enthusiasmLevel: 1 14 | }, 15 | 16 | getters: { 17 | getEnthusiasmLevel(state: HelloState) { 18 | return state.enthusiasmLevel; 19 | }, 20 | }, 21 | 22 | mutations: { 23 | increment(state: HelloState, amount: number) { 24 | state.enthusiasmLevel += amount; 25 | }, 26 | 27 | decrement(state: HelloState, amount: number) { 28 | state.enthusiasmLevel -= amount; 29 | } 30 | }, 31 | 32 | actions: { 33 | }, 34 | }; 35 | 36 | const { commit, read, dispatch } = getStoreAccessors(""); 37 | 38 | const helloAccessor = { 39 | enthusiasmLevel: read(helloModule.getters.getEnthusiasmLevel), 40 | increment: commit(helloModule.mutations.increment), 41 | decrement: commit(helloModule.mutations.decrement) 42 | } 43 | 44 | export default helloAccessor; -------------------------------------------------------------------------------- /src/store/hello/index.ts: -------------------------------------------------------------------------------- 1 | import helloAccessor from "./hello"; 2 | import { HelloState, helloModule } from "./hello"; 3 | 4 | export { 5 | HelloState, 6 | helloAccessor as default, 7 | helloModule 8 | }; -------------------------------------------------------------------------------- /src/store/index.ts: -------------------------------------------------------------------------------- 1 | import store from "./store"; 2 | 3 | export default store; -------------------------------------------------------------------------------- /src/store/state-types.ts: -------------------------------------------------------------------------------- 1 | import { Store as VuexStore } from "vuex"; 2 | 3 | export interface GlobalState { 4 | } 5 | 6 | export type Store = VuexStore; 7 | 8 | declare module "vue/types/vue" { 9 | 10 | export interface ComponentOptions { 11 | $store: Store; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/store/store.ts: -------------------------------------------------------------------------------- 1 | import * as Vuex from "vuex"; 2 | import Vue from "vue"; 3 | import { helloModule } from "./hello"; 4 | import { GlobalState } from "./state-types"; 5 | 6 | Vue.use(Vuex); 7 | 8 | const store = new Vuex.Store({ 9 | modules: { 10 | helloModule 11 | }, 12 | }); 13 | 14 | export default store; -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist/", 4 | "sourceMap": true, 5 | "declaration": false, 6 | "strict": true, 7 | "module": "es2015", 8 | "moduleResolution": "node", 9 | "emitDecoratorMetadata": true, 10 | "experimentalDecorators": true, 11 | "allowSyntheticDefaultImports": true, 12 | "target": "es5", 13 | "noImplicitAny": false, 14 | "skipLibCheck": true, 15 | "allowJs": true, 16 | "jsx": "preserve", 17 | "types": [ 18 | "node" 19 | ], 20 | "typeRoots": [ 21 | "node_modules/@types", 22 | "node_modules/**/types", 23 | "./src/@types" 24 | ], 25 | "lib": [ 26 | "es2015", 27 | "dom" 28 | ] 29 | }, 30 | "include": [ 31 | "./src" 32 | ] 33 | } -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | 2 | var path = require('path'); 3 | var webpack = require('webpack'); 4 | var CopyWebpackPlugin = require('copy-webpack-plugin'); 5 | 6 | module.exports = { 7 | entry: './src/index.ts', 8 | output: { 9 | path: path.resolve(__dirname, './dist'), 10 | publicPath: 'dist/', 11 | filename: 'index.js' 12 | }, 13 | module: { 14 | rules: [ 15 | { 16 | test: /\.vue$/, 17 | exclude: /node_modules/, 18 | loader: 'vue-loader', 19 | options: { 20 | 21 | loaders: { 22 | 'scss': 'vue-style-loader!css-loader!sass-loader', 23 | 'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax', 24 | } 25 | } 26 | }, 27 | { 28 | test: /\.(png|jpg|gif|svg)$/, 29 | exclude: /node_modules/, 30 | loader: 'url-loader', 31 | options: { 32 | name: '[name].[ext]?[hash]' 33 | } 34 | }, 35 | { 36 | test: /\.scss$/, 37 | use: [{ 38 | loader: "style-loader" 39 | }, { 40 | loader: "css-loader" 41 | }, { 42 | loader: "sass-loader" 43 | }] 44 | }, 45 | { 46 | test: /\.js$/, 47 | exclude: /node_modules/, 48 | loader: 'babel-loader' 49 | }, 50 | { 51 | test: /\.ts(x?)$/, 52 | exclude: /node_modules/, 53 | use: [ 54 | { 55 | loader: 'babel-loader' 56 | }, 57 | { 58 | loader: 'ts-loader', 59 | options: { 60 | appendTsSuffixTo: [/\.vue$/] 61 | } 62 | } 63 | ] 64 | } 65 | ] 66 | }, 67 | resolve: { 68 | extensions: ['.ts', '.tsx', '.js', '.vue', '.json'], 69 | alias: { 70 | 'vue$': 'vue/dist/vue.esm.js' 71 | } 72 | }, 73 | devServer: { 74 | hot: true, 75 | stats: 'minimal' 76 | }, 77 | performance: { 78 | hints: false 79 | }, 80 | devtool: '#eval-source-map', 81 | plugins: [ 82 | new CopyWebpackPlugin([ 83 | { from: 'src/assets', to: 'assets' } 84 | ]), 85 | new webpack.HotModuleReplacementPlugin(), 86 | new webpack.NamedModulesPlugin() 87 | ] 88 | } 89 | 90 | if (process.env.NODE_ENV === 'production') { 91 | module.exports.devtool = '#source-map' 92 | // http://vue-loader.vuejs.org/en/workflow/production.html 93 | module.exports.plugins = (module.exports.plugins || []).concat([ 94 | new webpack.DefinePlugin({ 95 | 'process.env': { 96 | NODE_ENV: '"production"' 97 | } 98 | }), 99 | new webpack.optimize.UglifyJsPlugin({ 100 | sourceMap: true, 101 | compress: { 102 | warnings: false 103 | } 104 | }), 105 | new webpack.LoaderOptionsPlugin({ 106 | minimize: true 107 | }) 108 | ]) 109 | } --------------------------------------------------------------------------------