├── .babelrc ├── .postcssrc.js ├── public ├── favicon.ico ├── img │ └── icons │ │ ├── favicon-16x16.png │ │ ├── favicon-32x32.png │ │ ├── mstile-150x150.png │ │ ├── apple-touch-icon.png │ │ ├── android-chrome-192x192.png │ │ ├── android-chrome-512x512.png │ │ ├── apple-touch-icon-60x60.png │ │ ├── apple-touch-icon-76x76.png │ │ ├── apple-touch-icon-120x120.png │ │ ├── apple-touch-icon-152x152.png │ │ ├── apple-touch-icon-180x180.png │ │ ├── msapplication-icon-144x144.png │ │ └── safari-pinned-tab.svg ├── manifest.json └── index.html ├── src ├── assets │ └── logo.png ├── views │ ├── About.vue │ └── Home.vue ├── store.ts ├── shims.d.ts ├── router.ts ├── main.ts ├── registerServiceWorker.ts ├── App.vue └── components │ └── HelloWorld.vue ├── .gitignore ├── tslint.json ├── tests └── unit │ └── HelloWorld.spec.ts ├── README.md ├── jest.config.js ├── tsconfig.json └── package.json /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@vue/app" 4 | ] 5 | } -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {} 4 | } 5 | } -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PDDStudio/vuejs-playground/develop/public/favicon.ico -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PDDStudio/vuejs-playground/develop/src/assets/logo.png -------------------------------------------------------------------------------- /src/views/About.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | This is an about page 4 | 5 | 6 | -------------------------------------------------------------------------------- /public/img/icons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PDDStudio/vuejs-playground/develop/public/img/icons/favicon-16x16.png -------------------------------------------------------------------------------- /public/img/icons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PDDStudio/vuejs-playground/develop/public/img/icons/favicon-32x32.png -------------------------------------------------------------------------------- /public/img/icons/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PDDStudio/vuejs-playground/develop/public/img/icons/mstile-150x150.png -------------------------------------------------------------------------------- /public/img/icons/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PDDStudio/vuejs-playground/develop/public/img/icons/apple-touch-icon.png -------------------------------------------------------------------------------- /public/img/icons/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PDDStudio/vuejs-playground/develop/public/img/icons/android-chrome-192x192.png -------------------------------------------------------------------------------- /public/img/icons/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PDDStudio/vuejs-playground/develop/public/img/icons/android-chrome-512x512.png -------------------------------------------------------------------------------- /public/img/icons/apple-touch-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PDDStudio/vuejs-playground/develop/public/img/icons/apple-touch-icon-60x60.png -------------------------------------------------------------------------------- /public/img/icons/apple-touch-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PDDStudio/vuejs-playground/develop/public/img/icons/apple-touch-icon-76x76.png -------------------------------------------------------------------------------- /public/img/icons/apple-touch-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PDDStudio/vuejs-playground/develop/public/img/icons/apple-touch-icon-120x120.png -------------------------------------------------------------------------------- /public/img/icons/apple-touch-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PDDStudio/vuejs-playground/develop/public/img/icons/apple-touch-icon-152x152.png -------------------------------------------------------------------------------- /public/img/icons/apple-touch-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PDDStudio/vuejs-playground/develop/public/img/icons/apple-touch-icon-180x180.png -------------------------------------------------------------------------------- /public/img/icons/msapplication-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PDDStudio/vuejs-playground/develop/public/img/icons/msapplication-icon-144x144.png -------------------------------------------------------------------------------- /src/store.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 | 9 | }, 10 | mutations: { 11 | 12 | }, 13 | actions: { 14 | 15 | }, 16 | }); 17 | -------------------------------------------------------------------------------- /.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 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw* 22 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "defaultSeverity": "warning", 3 | "extends": [ 4 | "tslint:recommended" 5 | ], 6 | "rules": { 7 | "quotemark": [true, "single"], 8 | "indent": [true, "spaces", 2], 9 | "interface-name": false, 10 | "ordered-imports": false, 11 | "object-literal-sort-keys": false, 12 | "no-consecutive-blank-lines": false 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /tests/unit/HelloWorld.spec.ts: -------------------------------------------------------------------------------- 1 | import { shallow } 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 = shallow(HelloWorld, { 8 | propsData: { msg }, 9 | }); 10 | expect(wrapper.text()).toMatch(msg); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /src/shims.d.ts: -------------------------------------------------------------------------------- 1 | import Vue, { VNode } from 'vue'; 2 | 3 | declare module '*.vue' { 4 | export default Vue; 5 | } 6 | 7 | declare global { 8 | namespace JSX { 9 | // tslint:disable no-empty-interface 10 | interface Element extends VNode {} 11 | // tslint:disable no-empty-interface 12 | interface ElementClass extends Vue {} 13 | interface IntrinsicElements { 14 | [elem: string]: any; 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/router.ts: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Router from 'vue-router'; 3 | import Home from './views/Home.vue'; 4 | import About from './views/About.vue'; 5 | 6 | Vue.use(Router); 7 | 8 | export default new Router({ 9 | routes: [ 10 | { 11 | path: '/', 12 | name: 'home', 13 | component: Home, 14 | }, 15 | { 16 | path: '/about', 17 | name: 'about', 18 | component: About, 19 | }, 20 | ], 21 | }); 22 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Vuetify from 'vuetify'; 3 | import 'vuetify/dist/vuetify.min.css'; // Ensure you are using css-loader 4 | import App from './App.vue'; 5 | import router from './router'; 6 | import store from './store'; 7 | import './registerServiceWorker'; 8 | 9 | Vue.config.productionTip = false; 10 | 11 | Vue.use(Vuetify); 12 | 13 | new Vue({ 14 | router, 15 | store, 16 | render: (h) => h(App), 17 | }).$mount('#app'); 18 | -------------------------------------------------------------------------------- /src/views/Home.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 19 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sample-project", 3 | "short_name": "sample-project", 4 | "icons": [ 5 | { 6 | "src": "/img/icons/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/img/icons/android-chrome-512x512.png", 12 | "sizes": "512x512", 13 | "type": "image/png" 14 | } 15 | ], 16 | "start_url": "/index.html", 17 | "display": "standalone", 18 | "background_color": "#000000", 19 | "theme_color": "#4DBA87" 20 | } 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Vue.js Playground 2 | 3 | > Personal Playground using Vue.js, Vuetify & TypeScript 4 | 5 | **Note:** 6 | This project is still in an early stage and not intended for public use yet! 7 | 8 | ### Building 9 | 10 | To run the app in dev-mode simply run: 11 | 12 | ```sh 13 | npm run serve 14 | ``` 15 | 16 | To build the app in prod-mode run: 17 | 18 | ```sh 19 | npm run build 20 | ``` 21 | 22 | Build output can be found in `dist/` folder 23 | 24 | ### License 25 | (c) 2018 - Patrick Jung - [MIT License](https://opensource.org/licenses/MIT) -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | moduleFileExtensions: [ 3 | 'ts', 4 | 'tsx', 5 | 'js', 6 | 'jsx', 7 | 'json', 8 | 'vue' 9 | ], 10 | transform: { 11 | '^.+\\.vue$': 'vue-jest', 12 | '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub', 13 | '^.+\\.tsx?$': 'ts-jest' 14 | }, 15 | moduleNameMapper: { 16 | '^@/(.*)$': '/src/$1' 17 | }, 18 | snapshotSerializers: [ 19 | 'jest-serializer-vue' 20 | ], 21 | testMatch: [ 22 | '/(tests/unit/**/*.spec.(ts|tsx|js)|**/__tests__/*.(ts|tsx|js))' 23 | ] 24 | } -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "module": "esnext", 5 | "strict": true, 6 | "jsx": "preserve", 7 | "moduleResolution": "node", 8 | "experimentalDecorators": true, 9 | "emitDecoratorMetadata": true, 10 | "allowSyntheticDefaultImports": true, 11 | "sourceMap": true, 12 | "baseUrl": ".", 13 | "types": [ 14 | "node", 15 | "jest" 16 | ], 17 | "paths": { 18 | "@/*": [ 19 | "src/*" 20 | ] 21 | } 22 | }, 23 | "include": [ 24 | "src/**/*.ts", 25 | "src/**/*.tsx", 26 | "src/**/*.vue", 27 | "tests/**/*.ts", 28 | "tests/**/*.tsx" 29 | ], 30 | "exclude": [ 31 | "node_modules" 32 | ] 33 | } 34 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Vue.js Playground 10 | 11 | 12 | 13 | We're sorry but sample-project doesn't work properly without JavaScript enabled. Please enable it to continue. 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/registerServiceWorker.ts: -------------------------------------------------------------------------------- 1 | /* tslint: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 | cached() { 14 | console.log('Content has been cached for offline use.'); 15 | }, 16 | updated() { 17 | console.log('New content is available; please refresh.'); 18 | }, 19 | offline() { 20 | console.log('No internet connection found. App is running in offline mode.'); 21 | }, 22 | error(error) { 23 | console.error('Error during service worker registration:', error); 24 | }, 25 | }); 26 | } 27 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Home | 6 | About 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | ] 16 | 17 | 18 | 19 | 38 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@pddstudio/vuejs-playground", 3 | "version": "0.1.0", 4 | "private": false, 5 | "homepage": "https://github.com/pddstudio/vuejs-playground", 6 | "scripts": { 7 | "serve": "vue-cli-service serve --open", 8 | "build": "vue-cli-service build", 9 | "test": "vue-cli-service test", 10 | "lint": "vue-cli-service lint", 11 | "deploy": "node ./node_modules/vue-gh-pages/index.js" 12 | }, 13 | "dependencies": { 14 | "register-service-worker": "^1.0.0", 15 | "vue": "^2.5.16", 16 | "vue-class-component": "^6.0.0", 17 | "vue-property-decorator": "^6.0.0", 18 | "vue-router": "^3.0.1", 19 | "vuetify": "^1.0.17", 20 | "vuex": "^3.0.1" 21 | }, 22 | "devDependencies": { 23 | "@types/jest": "^22.0.1", 24 | "@vue/cli-plugin-babel": "^3.0.0-beta.9", 25 | "@vue/cli-plugin-pwa": "^3.0.0-beta.9", 26 | "@vue/cli-plugin-typescript": "^3.0.0-beta.9", 27 | "@vue/cli-plugin-unit-jest": "^3.0.0-beta.9", 28 | "@vue/cli-service": "^3.0.0-beta.9", 29 | "@vue/test-utils": "^1.0.0-beta.10", 30 | "babel-core": "^7.0.0-0", 31 | "lint-staged": "^6.0.0", 32 | "node-sass": "^4.7.2", 33 | "sass-loader": "^6.0.6", 34 | "ts-jest": "^22.0.1", 35 | "vue-gh-pages": "^1.16.0", 36 | "vue-template-compiler": "^2.5.13" 37 | }, 38 | "browserslist": [ 39 | "> 1%", 40 | "last 2 versions", 41 | "not ie <= 8" 42 | ], 43 | "gitHooks": { 44 | "pre-commit": "lint-staged" 45 | }, 46 | "lint-staged": { 47 | "*.ts": [ 48 | "vue-cli-service lint", 49 | "git add" 50 | ], 51 | "*.vue": [ 52 | "vue-cli-service lint", 53 | "git add" 54 | ] 55 | } 56 | } -------------------------------------------------------------------------------- /src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | {{ msg }} 4 | 5 | For guide and recipes on how to configure / customize this project, 6 | check out the 7 | vue-cli documentation. 8 | 9 | Installed CLI Plugins 10 | 11 | babel 12 | typescript 13 | pwa 14 | unit-jest 15 | 16 | Essential Links 17 | 18 | Core Docs 19 | Forum 20 | Community Chat 21 | Twitter 22 | 23 | Ecosystem 24 | 25 | vue-router 26 | vuex 27 | vue-devtools 28 | vue-loader 29 | awesome-vue 30 | 31 | 32 | 33 | 34 | 42 | 43 | 44 | 60 | -------------------------------------------------------------------------------- /public/img/icons/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | Created by potrace 1.11, written by Peter Selinger 2001-2013 9 | 10 | 12 | 148 | 149 | 150 | --------------------------------------------------------------------------------
5 | For guide and recipes on how to configure / customize this project, 6 | check out the 7 | vue-cli documentation. 8 |