├── .gitignore ├── LICENSE ├── README.md ├── package.json ├── src ├── components │ └── navbar │ │ ├── navbar.html │ │ └── navbar.ts ├── index.html ├── main.scss ├── main.ts ├── vendor.ts └── views │ ├── about │ ├── about.html │ └── about.ts │ └── home │ ├── home.html │ ├── home.scss │ └── home.ts ├── tsconfig.json ├── typings.json └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | typings 3 | dist -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Francis O'Brien 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. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-typescript-seed 2 | A starter project for [vue-typescript](https://github.com/itsFrank/vue-typescript) using webpack and bootstrap 3 | 4 | This seed repo comes with all you need to start building a vuejs project using typescript. 5 | 6 | Packages included: 7 | - vue 8 | - vue-router 9 | - webpack (and all the loaders and utilities necessary) 10 | - bootstrap 3 11 | - jquery 2.2.4 12 | 13 | Scripts: 14 | 15 | `npm run dev` - will start a local dev server at localhost:8080 16 | 17 | `npm run build` - will build your project into the /dist folder 18 | 19 | `npm run clean` - will delete the dist folder 20 | 21 | Setup: run `npm install` 22 | 23 | Clone it and get started! 24 | 25 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-typescript-seed", 3 | "version": "1.0.0", 4 | "description": "A starter project for vue typescript using webpack and bootstrap", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack-dev-server --inline --progress --profile --colors --watch --display-error-details --display-cached --content-base src/", 8 | "clean": "rm -rf dist", 9 | "build": "webpack", 10 | "postinstall": "typings install" 11 | }, 12 | "author": "Francis O'Brien", 13 | "license": "MIT", 14 | "devDependencies": { 15 | "copy-webpack-plugin": "^3.0.1", 16 | "css-loader": "^0.23.1", 17 | "file-loader": "^0.9.0", 18 | "html-webpack-plugin": "^2.21.0", 19 | "json-loader": "^0.5.4", 20 | "node-sass": "^3.8.0", 21 | "raw-loader": "^0.5.1", 22 | "resolve-url-loader": "^1.4.4", 23 | "sass-loader": "^4.0.0", 24 | "style-loader": "^0.13.1", 25 | "ts-loader": "^0.8.2", 26 | "typescript": "^1.8.10", 27 | "typings": "^1.3.1", 28 | "url-loader": "^0.5.7", 29 | "webpack": "^1.13.1", 30 | "webpack-dev-server": "^1.14.1" 31 | }, 32 | "dependencies": { 33 | "bootstrap": "^3.3.6", 34 | "jquery": "^2.2.4", 35 | "vue": "^1.0.26", 36 | "vue-router": "^0.7.13", 37 | "vue-typescript": "^0.5.2" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/components/navbar/navbar.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/navbar/navbar.ts: -------------------------------------------------------------------------------- 1 | import { VueComponent, Prop, Watch } from 'vue-typescript' 2 | 3 | //This is overkill but typescript is great! :) 4 | class Link { 5 | name:string; 6 | path:string; 7 | 8 | constructor(name:string, path:string){ 9 | this.name = name; 10 | this.path = path; 11 | } 12 | } 13 | 14 | @VueComponent({ 15 | template: require('./navbar.html') 16 | }) 17 | export class Navbar extends Vue { 18 | 19 | @Prop 20 | inverted:boolean = true; //default value 21 | 22 | @Prop 23 | object:{default:string} = {default: 'Default object property!'}; //objects as default values don't need to be wrapped into functions 24 | 25 | links:Link[] = [ 26 | new Link('Home', '/'), 27 | new Link('About', '/about') 28 | ] 29 | 30 | @Watch('$route.path') 31 | pathChanged(){ 32 | console.log('Changed current path to: ' + this.$route.path); 33 | } 34 | 35 | ready(){ 36 | console.log(this.object.default); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= webpackConfig.metadata.title %> 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | loading... 23 |
24 | 25 | <% if (webpackConfig.metadata.isDevServer) { %> 26 | 27 | 28 | <% } %> 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /src/main.scss: -------------------------------------------------------------------------------- 1 | html, body, #app-main { 2 | height: 100%; 3 | } -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import * as Vue from 'vue' 2 | import * as VueRouter from 'vue-router' 3 | 4 | import './vendor' //bootstrap 5 | require('./main.scss'); //global css 6 | 7 | /* 8 | For components that will be used in html (such as navbar), 9 | all you need to do is import the file somewhere in your code, 10 | they are automatically registered when the file is loaded. 11 | However, if you import the class (ex: import { Navbar } from './navbar'), 12 | you will have to call new Navbar() somewhere as well. You would want 13 | to do that if you are defining a components{} object in the @VueComponent 14 | options parameter. 15 | */ 16 | import './components/navbar/navbar' 17 | 18 | import { HomeComponent } from './views/home/home' 19 | import { AboutComponent } from './views/about/about' 20 | 21 | Vue.use(VueRouter); 22 | 23 | var app = Vue.extend({}); 24 | 25 | var router = new VueRouter(); 26 | 27 | router.map({ 28 | '/' : { 29 | component: HomeComponent 30 | }, 31 | '/about' : { 32 | component: AboutComponent 33 | } 34 | }); 35 | 36 | router.start(app, '#app-main'); -------------------------------------------------------------------------------- /src/vendor.ts: -------------------------------------------------------------------------------- 1 | //Get webpack to automatically include bootstrap 2 | //If you have more vendor stuff, you should probably get webpack to make a second bundle 3 | require('bootstrap/dist/css/bootstrap.min.css'); 4 | require('bootstrap/dist/js/bootstrap.min.js'); -------------------------------------------------------------------------------- /src/views/about/about.html: -------------------------------------------------------------------------------- 1 | This is the about page... -------------------------------------------------------------------------------- /src/views/about/about.ts: -------------------------------------------------------------------------------- 1 | import { VueComponent } from 'vue-typescript' 2 | 3 | @VueComponent({ 4 | template: require('./about.html') 5 | }) 6 | export class AboutComponent { 7 | ready(){ 8 | console.log('about is ready!'); 9 | } 10 | } -------------------------------------------------------------------------------- /src/views/home/home.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

Thank you for using {{package}}

5 | 6 |

Make sure to follow the project on GitHub to stay up to date with the latest releases, or contribute to the broject by opening an issue or making a pull-request!

7 |
8 |
9 |
-------------------------------------------------------------------------------- /src/views/home/home.scss: -------------------------------------------------------------------------------- 1 | .content { 2 | text-align: center; 3 | padding: 15px; 4 | height: 400px; 5 | } -------------------------------------------------------------------------------- /src/views/home/home.ts: -------------------------------------------------------------------------------- 1 | import { VueComponent } from 'vue-typescript' 2 | 3 | @VueComponent({ 4 | template: require('./home.html'), 5 | style: require('./home.scss') 6 | }) 7 | export class HomeComponent extends Vue { 8 | 9 | package:string = 'vue-typescript'; 10 | repo:string = 'https://github.com/itsFrank/vue-typescript'; 11 | 12 | } -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "moduleResolution": "node", 5 | "target": "es5", 6 | "sourceMap": true, 7 | "emitDecoratorMetadata": true, 8 | "experimentalDecorators": true, 9 | "outDir": "dist" 10 | }, 11 | "exclude": [ 12 | "node_modules" 13 | ] 14 | } -------------------------------------------------------------------------------- /typings.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-typescript-seed", 3 | "dependencies": {}, 4 | "globalDependencies": { 5 | "jquery": "registry:dt/jquery#1.10.0+20160704162008", 6 | "node": "registry:dt/node#6.0.0+20160709114037", 7 | "vue": "registry:dt/vue#1.0.21+20160423143248", 8 | "vue-router": "registry:dt/vue-router#0.7.10+20160316155526" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Helper: root(), and rootDir() are defined at the bottom 3 | */ 4 | var path = require('path'); 5 | // Webpack Plugins 6 | var ProvidePlugin = require('webpack/lib/ProvidePlugin'); 7 | var DefinePlugin = require('webpack/lib/DefinePlugin'); 8 | var CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin'); 9 | var CopyWebpackPlugin = require('copy-webpack-plugin'); 10 | var HtmlWebpackPlugin = require('html-webpack-plugin'); 11 | var ENV = process.env.ENV = process.env.NODE_ENV = 'development'; 12 | const autoprefixer = require('autoprefixer'); 13 | 14 | var metadata = { 15 | title: 'vue-typescript ts sample', 16 | host: 'localhost', 17 | port: 8080, 18 | ENV: ENV 19 | }; 20 | /* 21 | * Config 22 | */ 23 | module.exports = { 24 | // static data for index.html 25 | metadata: metadata, 26 | // for faster builds use 'eval' 27 | devtool: 'source-map', //to point console errors to ts files instead of compiled js 28 | debug: true, 29 | 30 | entry: [ 31 | './src/main.ts' //app main file 32 | ], 33 | 34 | // Config for our build files 35 | output: { 36 | path: root('dist'), 37 | filename: '[name].bundle.js', 38 | sourceMapFilename: '[name].map', 39 | chunkFilename: '[id].chunk.js' 40 | }, 41 | 42 | resolve: { 43 | // ensure loader extensions match 44 | extensions: ['', '.ts', '.js', '.json', '.css', '.scss', '.sass', '.html'], // <-- include .scss 45 | fallback: [path.join(__dirname, './node_modules')] //default to node_modules when not found 46 | }, 47 | resolveLoader: { 48 | fallback: [path.join(__dirname, './node_modules')] 49 | }, 50 | module: { 51 | loaders: [ 52 | // Support for .ts files. 53 | { 54 | test: /\.ts$/, 55 | loader: 'ts-loader', 56 | exclude: [/\.(spec|e2e)\.ts$/] 57 | }, 58 | 59 | // Support for *.json files. 60 | { test: /\.json$/, loader: 'json-loader' }, 61 | 62 | // Support for CSS as raw text 63 | { test: /\.css$/, loaders: ['style', 'css'] }, 64 | 65 | // support for .html as raw text 66 | { test: /\.html$/, loader: 'raw-loader', exclude: [ root('src/index.html') ] }, 67 | 68 | // if you add a loader include the resolve file extension above 69 | 70 | { test: /\.(scss|sass)$/, loaders: ['style', 'css', 'sass'] }, 71 | 72 | { test: /\.(woff2?|ttf|eot|svg)$/, loader: 'url?limit=10000' }, 73 | 74 | // Bootstrap 4 75 | { test: /bootstrap\/dist\/js\/umd\//, loader: 'imports?jQuery=jquery' } 76 | ] 77 | }, 78 | 79 | // sassResources: path.resolve(__dirname, "./node_modules/bootstrap/scss"), 80 | 81 | postcss: [autoprefixer], // <--- postcss 82 | 83 | plugins: [ 84 | new CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.bundle.js', minChunks: Infinity }), 85 | // static assets 86 | new CopyWebpackPlugin([{ from: 'src/assets', to: 'assets' }]), 87 | // generating html 88 | new HtmlWebpackPlugin({ template: 'src/index.html' }), 89 | // replace 90 | new DefinePlugin({ 91 | 'process.env': { 92 | 'ENV': JSON.stringify(metadata.ENV), 93 | 'NODE_ENV': JSON.stringify(metadata.ENV) 94 | } 95 | }), 96 | 97 | //Make jquery and Vue globally available without the need to import them 98 | new ProvidePlugin({ 99 | jQuery: 'jquery', 100 | $: 'jquery', 101 | jquery: 'jquery', 102 | Vue: 'vue' 103 | }) 104 | ], 105 | 106 | // our Webpack Development Server config 107 | devServer: { 108 | port: metadata.port, 109 | host: metadata.host, 110 | historyApiFallback: true, 111 | watchOptions: { aggregateTimeout: 300, poll: 1000 } 112 | } 113 | }; 114 | 115 | // Helper functions 116 | 117 | function root(args) { 118 | args = Array.prototype.slice.call(arguments, 0); 119 | return path.join.apply(path, [__dirname].concat(args)); 120 | } 121 | 122 | function rootNode(args) { 123 | args = Array.prototype.slice.call(arguments, 0); 124 | return root.apply(path, ['node_modules'].concat(args)); 125 | } --------------------------------------------------------------------------------