├── .browserslistrc ├── .eslintrc.js ├── .github ├── FUNDING.yml └── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md ├── .gitignore ├── LICENSE ├── README.md ├── babel.config.js ├── cypress.json ├── dev.code-workspace ├── jest.config.js ├── package.json ├── public ├── favicon.ico ├── img │ ├── icons │ │ ├── android-chrome-192x192.png │ │ ├── android-chrome-512x512.png │ │ ├── android-chrome-maskable-192x192.png │ │ ├── android-chrome-maskable-512x512.png │ │ ├── apple-touch-icon-120x120.png │ │ ├── apple-touch-icon-152x152.png │ │ ├── apple-touch-icon-180x180.png │ │ ├── apple-touch-icon-60x60.png │ │ ├── apple-touch-icon-76x76.png │ │ ├── apple-touch-icon.png │ │ ├── favicon-16x16.png │ │ ├── favicon-32x32.png │ │ ├── favicon.ico │ │ ├── logo.svg │ │ ├── msapplication-icon-144x144.png │ │ ├── mstile-150x150.png │ │ ├── safari-pinned-tab.svg │ │ ├── vue-boilerplates-bg.png │ │ ├── vue-boilerplates.png │ │ └── vue-boilerplates.svg │ └── vue-boilerplates.svg ├── index.html └── robots.txt ├── src ├── App.vue ├── assets │ ├── css │ │ └── styles.scss │ └── img │ │ └── logo.svg ├── components │ └── Navbar.vue ├── main.ts ├── pages │ ├── About.vue │ └── Home.vue ├── registerServiceWorker.ts ├── router │ └── index.ts ├── shims-tsx.d.ts ├── shims-vue.d.ts ├── store │ └── index.ts └── utils │ └── vue-imports.ts ├── tests ├── e2e │ ├── .eslintrc.js │ ├── plugins │ │ └── index.js │ ├── specs │ │ └── test.js │ └── support │ │ ├── commands.js │ │ └── index.js └── unit │ └── example.spec.ts ├── tsconfig.json ├── vue.config.js └── yarn.lock /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not dead 4 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true, 5 | browser: true, 6 | }, 7 | extends: [ 8 | "plugin:vue/essential", 9 | "plugin:prettier/recommended", 10 | "eslint:recommended", 11 | "@vue/typescript/recommended", 12 | "@vue/prettier", 13 | "@vue/prettier/@typescript-eslint", 14 | ], 15 | parserOptions: { 16 | ecmaVersion: 2020, 17 | }, 18 | rules: { 19 | "vue/component-name-in-template-casing": ["error", "PascalCase"], 20 | "no-console": process.env.NODE_ENV === "production" ? "warn" : "off", 21 | "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off", 22 | }, 23 | overrides: [ 24 | { 25 | files: [ 26 | "**/__tests__/*.{j,t}s?(x)", 27 | "**/tests/unit/**/*.spec.{j,t}s?(x)", 28 | ], 29 | env: { 30 | jest: true, 31 | }, 32 | }, 33 | ], 34 | }; 35 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | ko_fi: sureshbabusakthi 3 | custom: ['https://www.buymeacoffee.com/zxqp'] # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 4 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | /tests/e2e/videos/ 6 | /tests/e2e/screenshots/ 7 | 8 | # local env files 9 | .env.local 10 | .env.*.local 11 | 12 | # Log files 13 | npm-debug.log* 14 | yarn-debug.log* 15 | yarn-error.log* 16 | 17 | #lock file 18 | #yarn.lock 19 | .yarnclean 20 | 21 | # Editor directories and files 22 | .idea 23 | .vscode 24 | *.suo 25 | *.ntvs* 26 | *.njsproj 27 | *.sln 28 | *.sw? 29 | #*.code-workspace 30 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Suresh Babu Sakthi 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue Boilerplates : vue-typescript-boilerplate 2 | [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2FVue-Boilerplates%2Fvue-typescript-boilerplate.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2FVue-Boilerplates%2Fvue-typescript-boilerplate?ref=badge_shield) 3 | 4 | 5 | > A vue.js project with Latest Vue + Typescript + Lazy loading and code splitting 6 | 7 | ## Why to choose Vue Boilerplates? 8 | > While mobile-first approach becomes a standard and uncertain network conditions are something we should always take into consideration, it’s harder and harder to keep your application loading fast. Hence **Vue Boilerplates** are built with vue.js performance optimization techniques that make them loading instantly and perform smooth :rocket:. 9 | **Please consider becoming a [donor](https://opencollective.com/vue-boilerplates)**. :pray: 10 | 11 | ## Features 12 | The following features are delivered out of the box in this repo, you are just one click away from starting your Progressive Web application (PWA) with advanced features of Vue, 13 | 14 | - Vue 15 | - Vue router 16 | - Vuex 17 | - Vue Class Component 18 | - Typescript 19 | - PWA - service worker 20 | - SASS 21 | - babel 22 | - Webpack bundling 23 | - Prettier 24 | - ESLint 25 | - cypress 26 | - jest 27 | - gitignore 28 | - VScode Workspace (optional) 29 | 30 | ## Bonus 31 | **Lazy loading and Code Splitting** 32 | With dynamic imports, all pages including their dependency libraries are exported as web chunks with custom name references for lazy loading :sunglasses: 33 | Even Vue library was exported as a seperate web chunk :heart_eyes: 34 | 35 | ## Getting started 36 | 37 | ```bash 38 | # 1. Clone the repository. 39 | git clone https://github.com/Vue-Boilerplates/vue-typescript-boilerplate.git my-new-project 40 | 41 | # 2. Enter your newly-cloned folder. 42 | cd my-new-project 43 | 44 | ``` 45 | 46 | ```bash 47 | ## proceed with yarn 48 | 49 | # 3. Install dependencies. Make sure yarn is installed: https://yarnpkg.com/lang/en/docs/install 50 | yarn 51 | 52 | # 4. Serve with hot reload at localhost:8080 53 | yarn serve 54 | 55 | # 5. Build for production with minification 56 | yarn build 57 | ``` 58 | 59 | 60 | ```bash 61 | ## proceed with npm 62 | 63 | # 3. Install dependencies. Make sure npm is installed: https://docs.npmjs.com/downloading-and-installing-node-js-and-npm 64 | npm install 65 | 66 | # 4. Serve with hot reload at localhost:8080 67 | npm run serve 68 | 69 | # 5. Build for production with minification 70 | npm run build 71 | ``` 72 | 73 | ## Coming Soon! 74 | - More Boilerplates - Android and iOS Apps 75 | - Detailed Documentation 76 | - Practical Examples 77 | 78 | # Support 79 | 80 | [Give me a Star⭐️](https://github.com/Vue-Boilerplates/vue-typescript-boilerplate) 81 | 82 | [Buy me a ☕️!](https://www.buymeacoffee.com/zxqp) 83 | 84 | [![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/sureshbabusakthi) 85 | 86 | # License 87 | Released under the MIT [License](./LICENSE) 88 | 89 | [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2FVue-Boilerplates%2Fvue-typescript-boilerplate.svg?type=small)](https://app.fossa.com/api/projects/git%2Bgithub.com%2FVue-Boilerplates%2Fvue-typescript-boilerplate.svg?type=small) 90 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ["@vue/cli-plugin-babel/preset"], 3 | }; 4 | -------------------------------------------------------------------------------- /cypress.json: -------------------------------------------------------------------------------- 1 | { 2 | "pluginsFile": "tests/e2e/plugins/index.js" 3 | } 4 | -------------------------------------------------------------------------------- /dev.code-workspace: -------------------------------------------------------------------------------- 1 | { 2 | "folders": [ 3 | { 4 | "path": "." 5 | }, 6 | ], 7 | "settings": { 8 | "eslint.validate": [ 9 | "vue", 10 | "javascript", 11 | "typescript", 12 | "javascriptreact" 13 | ], 14 | // "eslint.validate": [ 15 | // { 16 | // "language": "vue", 17 | // "autoFix": true 18 | // }, 19 | // { 20 | // "language": "javascript", 21 | // "autoFix": true 22 | // }, 23 | // { 24 | // "language": "typescript", 25 | // "autoFix": true 26 | // }, 27 | // { 28 | // "language": "javascriptreact", 29 | // "autoFix": true 30 | // } 31 | // ], 32 | // "eslint.autoFixOnSave": true, 33 | // "editor.formatOnSave": false, 34 | "vetur.validation.template": true, 35 | "editor.codeActionsOnSave": { 36 | "source.fixAll.eslint": true 37 | }, 38 | "cSpell.words": [ 39 | 40 | ], 41 | "editor.renameOnType": true 42 | } 43 | } -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: "@vue/cli-plugin-unit-jest/presets/typescript-and-babel", 3 | }; 4 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-typescript-boilerplate", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "test:unit": "vue-cli-service test:unit", 9 | "test:e2e": "vue-cli-service test:e2e", 10 | "lint": "vue-cli-service lint" 11 | }, 12 | "dependencies": { 13 | "core-js": "3.6.5", 14 | "moment": "2.27.0", 15 | "register-service-worker": "1.7.1", 16 | "vue": "2.6.11", 17 | "vue-router": "3.3.4", 18 | "vuex": "3.5.1" 19 | }, 20 | "devDependencies": { 21 | "@types/jest": "25.2.3", 22 | "@typescript-eslint/eslint-plugin": "2.34.0", 23 | "@typescript-eslint/parser": "2.34.0", 24 | "@vue/cli-plugin-babel": "4.4.6", 25 | "@vue/cli-plugin-e2e-cypress": "4.4.6", 26 | "@vue/cli-plugin-eslint": "4.4.6", 27 | "@vue/cli-plugin-pwa": "4.4.6", 28 | "@vue/cli-plugin-router": "4.4.6", 29 | "@vue/cli-plugin-typescript": "4.4.6", 30 | "@vue/cli-plugin-unit-jest": "4.4.6", 31 | "@vue/cli-plugin-vuex": "4.4.6", 32 | "@vue/cli-service": "4.4.6", 33 | "@vue/eslint-config-prettier": "6.0.0", 34 | "@vue/eslint-config-typescript": "5.0.2", 35 | "@vue/preload-webpack-plugin": "1.1.1", 36 | "@vue/test-utils": "1.0.3", 37 | "eslint": "6.8.0", 38 | "eslint-plugin-prettier": "3.1.4", 39 | "eslint-plugin-vue": "6.2.2", 40 | "moment-locales-webpack-plugin": "1.2.0", 41 | "node-sass": "4.14.1", 42 | "prettier": "2.0.5", 43 | "sass-loader": "8.0.2", 44 | "typescript": "3.9.6", 45 | "vue-class-component": "7.2.3", 46 | "vue-property-decorator": "8.5.0", 47 | "vue-template-compiler": "2.6.11" 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vue-Boilerplates/vue-typescript-boilerplate/baad3a1cfc6bc0447bef373e2e549f40e80e89cd/public/favicon.ico -------------------------------------------------------------------------------- /public/img/icons/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vue-Boilerplates/vue-typescript-boilerplate/baad3a1cfc6bc0447bef373e2e549f40e80e89cd/public/img/icons/android-chrome-192x192.png -------------------------------------------------------------------------------- /public/img/icons/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vue-Boilerplates/vue-typescript-boilerplate/baad3a1cfc6bc0447bef373e2e549f40e80e89cd/public/img/icons/android-chrome-512x512.png -------------------------------------------------------------------------------- /public/img/icons/android-chrome-maskable-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vue-Boilerplates/vue-typescript-boilerplate/baad3a1cfc6bc0447bef373e2e549f40e80e89cd/public/img/icons/android-chrome-maskable-192x192.png -------------------------------------------------------------------------------- /public/img/icons/android-chrome-maskable-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vue-Boilerplates/vue-typescript-boilerplate/baad3a1cfc6bc0447bef373e2e549f40e80e89cd/public/img/icons/android-chrome-maskable-512x512.png -------------------------------------------------------------------------------- /public/img/icons/apple-touch-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vue-Boilerplates/vue-typescript-boilerplate/baad3a1cfc6bc0447bef373e2e549f40e80e89cd/public/img/icons/apple-touch-icon-120x120.png -------------------------------------------------------------------------------- /public/img/icons/apple-touch-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vue-Boilerplates/vue-typescript-boilerplate/baad3a1cfc6bc0447bef373e2e549f40e80e89cd/public/img/icons/apple-touch-icon-152x152.png -------------------------------------------------------------------------------- /public/img/icons/apple-touch-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vue-Boilerplates/vue-typescript-boilerplate/baad3a1cfc6bc0447bef373e2e549f40e80e89cd/public/img/icons/apple-touch-icon-180x180.png -------------------------------------------------------------------------------- /public/img/icons/apple-touch-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vue-Boilerplates/vue-typescript-boilerplate/baad3a1cfc6bc0447bef373e2e549f40e80e89cd/public/img/icons/apple-touch-icon-60x60.png -------------------------------------------------------------------------------- /public/img/icons/apple-touch-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vue-Boilerplates/vue-typescript-boilerplate/baad3a1cfc6bc0447bef373e2e549f40e80e89cd/public/img/icons/apple-touch-icon-76x76.png -------------------------------------------------------------------------------- /public/img/icons/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vue-Boilerplates/vue-typescript-boilerplate/baad3a1cfc6bc0447bef373e2e549f40e80e89cd/public/img/icons/apple-touch-icon.png -------------------------------------------------------------------------------- /public/img/icons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vue-Boilerplates/vue-typescript-boilerplate/baad3a1cfc6bc0447bef373e2e549f40e80e89cd/public/img/icons/favicon-16x16.png -------------------------------------------------------------------------------- /public/img/icons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vue-Boilerplates/vue-typescript-boilerplate/baad3a1cfc6bc0447bef373e2e549f40e80e89cd/public/img/icons/favicon-32x32.png -------------------------------------------------------------------------------- /public/img/icons/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vue-Boilerplates/vue-typescript-boilerplate/baad3a1cfc6bc0447bef373e2e549f40e80e89cd/public/img/icons/favicon.ico -------------------------------------------------------------------------------- /public/img/icons/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/icons/msapplication-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vue-Boilerplates/vue-typescript-boilerplate/baad3a1cfc6bc0447bef373e2e549f40e80e89cd/public/img/icons/msapplication-icon-144x144.png -------------------------------------------------------------------------------- /public/img/icons/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vue-Boilerplates/vue-typescript-boilerplate/baad3a1cfc6bc0447bef373e2e549f40e80e89cd/public/img/icons/mstile-150x150.png -------------------------------------------------------------------------------- /public/img/icons/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/icons/vue-boilerplates-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vue-Boilerplates/vue-typescript-boilerplate/baad3a1cfc6bc0447bef373e2e549f40e80e89cd/public/img/icons/vue-boilerplates-bg.png -------------------------------------------------------------------------------- /public/img/icons/vue-boilerplates.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Vue-Boilerplates/vue-typescript-boilerplate/baad3a1cfc6bc0447bef373e2e549f40e80e89cd/public/img/icons/vue-boilerplates.png -------------------------------------------------------------------------------- /public/img/icons/vue-boilerplates.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/vue-boilerplates.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Vue Boilerplates (vue-typescript-boilerplate) 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: 3 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/assets/css/styles.scss: -------------------------------------------------------------------------------- 1 | //Custom Styles here 2 | #app { 3 | font-family: Avenir, Helvetica, Arial, sans-serif; 4 | -webkit-font-smoothing: antialiased; 5 | -moz-osx-font-smoothing: grayscale; 6 | text-align: center; 7 | color: #2c3e50; 8 | } 9 | 10 | #nav { 11 | padding: 30px; 12 | 13 | a { 14 | font-weight: bold; 15 | color: #2c3e50; 16 | 17 | &.router-link-exact-active { 18 | color: #42b983; 19 | } 20 | } 21 | } -------------------------------------------------------------------------------- /src/assets/img/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/Navbar.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 24 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import App from "@/App.vue"; 3 | import "@/registerServiceWorker"; 4 | import router from "@/router"; 5 | import store from "@/store"; 6 | import "@/assets/css/styles.scss"; 7 | Vue.prototype.$mapFields = Vue; 8 | 9 | Vue.config.productionTip = false; 10 | 11 | new Vue({ 12 | router, 13 | store, 14 | render: (h) => h(App), 15 | }).$mount("#app"); 16 | -------------------------------------------------------------------------------- /src/pages/About.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 20 | -------------------------------------------------------------------------------- /src/pages/Home.vue: -------------------------------------------------------------------------------- 1 | 34 | 35 | 47 | 48 | 85 | -------------------------------------------------------------------------------- /src/registerServiceWorker.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-console */ 2 | 3 | import { register } from "register-service-worker"; 4 | 5 | if (process.env.NODE_ENV === "production") { 6 | register(`${process.env.BASE_URL}service-worker.js`, { 7 | ready() { 8 | console.log( 9 | "App is being served from cache by a service worker.\n" + 10 | "For more details, visit https://goo.gl/AFskqB" 11 | ); 12 | }, 13 | registered() { 14 | console.log("Service worker has been registered."); 15 | }, 16 | cached() { 17 | console.log("Content has been cached for offline use."); 18 | }, 19 | updatefound() { 20 | console.log("New content is downloading."); 21 | }, 22 | updated() { 23 | console.log("New content is available; please refresh."); 24 | }, 25 | offline() { 26 | console.log( 27 | "No internet connection found. App is running in offline mode." 28 | ); 29 | }, 30 | error(error) { 31 | console.error("Error during service worker registration:", error); 32 | }, 33 | }); 34 | } 35 | -------------------------------------------------------------------------------- /src/router/index.ts: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import VueRouter, { RouteConfig } from "vue-router"; 3 | 4 | Vue.use(VueRouter); 5 | 6 | const routes: Array = [ 7 | { 8 | path: "/", 9 | name: "Home", 10 | component: () => import(/* webpackChunkName: "home" */ "@/pages/Home.vue"), //dynamic import of component and dependency 11 | }, 12 | { 13 | path: "/about", 14 | name: "About", 15 | component: () => 16 | import(/* webpackChunkName: "about" */ "@/pages/About.vue"), //dynamic import of component and dependency 17 | }, 18 | ]; 19 | 20 | const router = new VueRouter({ 21 | mode: "history", 22 | base: process.env.BASE_URL, 23 | routes, 24 | }); 25 | 26 | export default router; 27 | -------------------------------------------------------------------------------- /src/shims-tsx.d.ts: -------------------------------------------------------------------------------- 1 | import Vue, { VNode } from "vue"; 2 | 3 | declare global { 4 | namespace JSX { 5 | // tslint:disable no-empty-interface 6 | interface Element extends VNode {} 7 | // tslint:disable no-empty-interface 8 | interface ElementClass extends Vue {} 9 | interface IntrinsicElements { 10 | [elem: string]: any; 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.vue" { 2 | import Vue from "vue"; 3 | export default Vue; 4 | } 5 | -------------------------------------------------------------------------------- /src/store/index.ts: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import Vuex from "vuex"; 3 | 4 | Vue.use(Vuex); 5 | 6 | export default new Vuex.Store({ 7 | state: {}, 8 | mutations: {}, 9 | actions: {}, 10 | modules: {}, 11 | }); 12 | -------------------------------------------------------------------------------- /src/utils/vue-imports.ts: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import { Component, Prop } from "vue-property-decorator"; 3 | 4 | export { Vue, Component, Prop }; 5 | -------------------------------------------------------------------------------- /tests/e2e/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: ["cypress"], 3 | env: { 4 | mocha: true, 5 | "cypress/globals": true, 6 | }, 7 | rules: { 8 | strict: "off", 9 | }, 10 | }; 11 | -------------------------------------------------------------------------------- /tests/e2e/plugins/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable arrow-body-style */ 2 | // https://docs.cypress.io/guides/guides/plugins-guide.html 3 | 4 | // if you need a custom webpack configuration you can uncomment the following import 5 | // and then use the `file:preprocessor` event 6 | // as explained in the cypress docs 7 | // https://docs.cypress.io/api/plugins/preprocessors-api.html#Examples 8 | 9 | // /* eslint-disable import/no-extraneous-dependencies, global-require */ 10 | // const webpack = require('@cypress/webpack-preprocessor') 11 | 12 | module.exports = (on, config) => { 13 | // on('file:preprocessor', webpack({ 14 | // webpackOptions: require('@vue/cli-service/webpack.config'), 15 | // watchOptions: {} 16 | // })) 17 | 18 | return Object.assign({}, config, { 19 | fixturesFolder: "tests/e2e/fixtures", 20 | integrationFolder: "tests/e2e/specs", 21 | screenshotsFolder: "tests/e2e/screenshots", 22 | videosFolder: "tests/e2e/videos", 23 | supportFile: "tests/e2e/support/index.js", 24 | }); 25 | }; 26 | -------------------------------------------------------------------------------- /tests/e2e/specs/test.js: -------------------------------------------------------------------------------- 1 | // https://docs.cypress.io/api/introduction/api.html 2 | 3 | describe("My First Test", () => { 4 | it("Visits the app root url", () => { 5 | cy.visit("/"); 6 | cy.contains("h1", "Welcome to Your Vue.js + TypeScript App"); 7 | }); 8 | }); 9 | -------------------------------------------------------------------------------- /tests/e2e/support/commands.js: -------------------------------------------------------------------------------- 1 | // *********************************************** 2 | // This example commands.js shows you how to 3 | // create various custom commands and overwrite 4 | // existing commands. 5 | // 6 | // For more comprehensive examples of custom 7 | // commands please read more here: 8 | // https://on.cypress.io/custom-commands 9 | // *********************************************** 10 | // 11 | // 12 | // -- This is a parent command -- 13 | // Cypress.Commands.add("login", (email, password) => { ... }) 14 | // 15 | // 16 | // -- This is a child command -- 17 | // Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... }) 18 | // 19 | // 20 | // -- This is a dual command -- 21 | // Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... }) 22 | // 23 | // 24 | // -- This is will overwrite an existing command -- 25 | // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) 26 | -------------------------------------------------------------------------------- /tests/e2e/support/index.js: -------------------------------------------------------------------------------- 1 | // *********************************************************** 2 | // This example support/index.js is processed and 3 | // loaded automatically before your test files. 4 | // 5 | // This is a great place to put global configuration and 6 | // behavior that modifies Cypress. 7 | // 8 | // You can change the location of this file or turn off 9 | // automatically serving support files with the 10 | // 'supportFile' configuration option. 11 | // 12 | // You can read more here: 13 | // https://on.cypress.io/configuration 14 | // *********************************************************** 15 | 16 | // Import commands.js using ES2015 syntax: 17 | import "./commands"; 18 | 19 | // Alternatively you can use CommonJS syntax: 20 | // require('./commands') 21 | -------------------------------------------------------------------------------- /tests/unit/example.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallowMount } from "@vue/test-utils"; 2 | import HelloWorld from "@/components/HelloWorld.vue"; 3 | 4 | describe("HelloWorld.vue", () => { 5 | it("renders props.msg when passed", () => { 6 | const msg = "new message"; 7 | const wrapper = shallowMount(HelloWorld, { 8 | propsData: { msg }, 9 | }); 10 | expect(wrapper.text()).toMatch(msg); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "module": "esnext", 5 | "strict": true, 6 | "jsx": "preserve", 7 | "importHelpers": true, 8 | "moduleResolution": "node", 9 | "experimentalDecorators": true, 10 | "esModuleInterop": true, 11 | "allowSyntheticDefaultImports": true, 12 | "sourceMap": true, 13 | "baseUrl": ".", 14 | "types": [ 15 | "webpack-env", 16 | "jest", 17 | "node" 18 | ], 19 | "paths": { 20 | "@/*": [ 21 | "src/*" 22 | ] 23 | }, 24 | "lib": [ 25 | "esnext", 26 | "dom", 27 | "dom.iterable", 28 | "scripthost" 29 | ] 30 | }, 31 | "include": [ 32 | "src/**/*.ts", 33 | "src/**/*.tsx", 34 | "src/**/*.vue", 35 | "tests/**/*.ts", 36 | "tests/**/*.tsx" 37 | ], 38 | "exclude": [ 39 | "node_modules" 40 | ] 41 | } 42 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/no-unused-vars */ 2 | /* eslint-disable @typescript-eslint/no-var-requires */ 3 | const webpack = require("webpack"); 4 | const MomentLocalesPlugin = require("moment-locales-webpack-plugin"); // for moment tree shaking locales 5 | const PreloadWebpackPlugin = require("@vue/preload-webpack-plugin"); 6 | 7 | module.exports = { 8 | publicPath: "/", 9 | runtimeCompiler: true, 10 | productionSourceMap: process.env.NODE_ENV !== "production", 11 | crossorigin: "use-credentials", 12 | lintOnSave: true, 13 | configureWebpack: (config) => { 14 | if (process.env.NODE_ENV === "development") { 15 | config.devtool = "source-map"; 16 | } else if (process.env.NODE_ENV === "test") { 17 | config.devtool = "cheap-module-eval-source-map"; 18 | } 19 | }, 20 | chainWebpack: (config) => { 21 | // for moment tree shaking locales 22 | config.resolve.alias.set("moment", "moment/moment.js"); 23 | 24 | // these settings apply to production or development, but will break mocha tests in the test NODE_ENV 25 | if ( 26 | process.env.NODE_ENV === "production" || 27 | process.env.NODE_ENV === "development" 28 | ) { 29 | // By default vue-cli sets rel=prefetch on chunks-vendor.js and app.js in the index.html that gets generated in index.html. 30 | // This setting removes vue-cli's this default so we can use more chunks and let them be loaded dynamically. 31 | config.plugins.delete("prefetch"); 32 | config.plugin("prefetch").use(PreloadWebpackPlugin, [ 33 | { 34 | rel: "prefetch", 35 | include: "asyncChunks", 36 | // do not prefetch async routes 37 | fileBlacklist: [/myasyncRoute(.)+?\.js$/, /\.map$/], 38 | }, 39 | { 40 | rel: "preload", 41 | include: "initial", 42 | fileWhitelist: [/(^@vue)(.*)(\.js$)/, /(^vue)(.*)(\.js$)/], 43 | // do not preload map files or hot update files 44 | fileBlacklist: [/\.map$/, /hot-update\.js$/], 45 | }, 46 | ]); 47 | 48 | // override vue's default chunks because their chunking is too big. 49 | config.optimization.delete("splitChunks"); 50 | config.optimization.set("splitChunks", { 51 | cacheGroups: { 52 | // Vue modules 53 | vue: { 54 | test: /[\\/]node_modules[\\/](@vue.*|vue.*)[\\/]/, 55 | name: "vue", 56 | enforce: true, 57 | priority: 20, 58 | chunks: "initial", 59 | }, 60 | // all other modules modules 61 | vendors: { 62 | name: "chunk-vendors", 63 | test(module, chunks) { 64 | // `module.resource` contains the absolute path of the file on disk. 65 | // Note the usage of `path.sep` instead of / or \, for cross-platform compatibility. 66 | const path = require("path"); 67 | return ( 68 | module.resource && 69 | !module.resource.includes( 70 | `${path.sep}node_modules${path.sep}@vue` 71 | ) && 72 | !module.resource.includes( 73 | `${path.sep}node_modules${path.sep}vue` 74 | ) && 75 | !module.resource.includes(`${path.sep}src${path.sep}`) 76 | ); 77 | }, 78 | maxSize: 500000, 79 | priority: 10, 80 | enforce: true, 81 | chunks: "all", // doesn't get created without 'all' here 82 | }, 83 | // default common chunk settings from Vue 84 | common: { 85 | name: "chunk-common", 86 | minChunks: 2, 87 | priority: 5, 88 | chunks: "initial", 89 | reuseExistingChunk: true, 90 | }, 91 | }, 92 | }); 93 | 94 | // Webpack includes a small piece of runtime code that gets inserted into the last chunk created. This could cause our vendor 95 | // chunk to change unnecessarily. So the next line causes this runtime to be put in a separate file. 96 | config.optimization.set("runtimeChunk", true); 97 | } 98 | 99 | if (process.env.NODE_ENV === "production") { 100 | // for moment tree shaking locales 101 | // Include only 'en-us' (which is always included) and 'es-us' locales 102 | config 103 | .plugin("moment") 104 | .use(MomentLocalesPlugin, [ 105 | { 106 | localesToKeep: ["es-us"], 107 | }, 108 | ]) 109 | .use( 110 | new webpack.IgnorePlugin({ 111 | resourceRegExp: /^\.\/locale$/, 112 | contextRegExp: /moment$/, 113 | }) 114 | ); 115 | } 116 | }, 117 | }; 118 | --------------------------------------------------------------------------------