├── template ├── .gitignore ├── .babelrc ├── public │ ├── v.png │ ├── favicon.ico │ ├── img │ │ └── icons │ │ │ ├── android-chrome-192x192.png │ │ │ └── android-chrome-512x512.png │ ├── manifest.json │ └── index.html ├── .eslintrc ├── src │ ├── css │ │ └── main.css │ ├── main.js │ ├── registerServiceWorker.js │ ├── router.js │ ├── pages │ │ ├── HomePage.vue │ │ ├── AboutPage.vue │ │ └── ExamplePage.vue │ └── App.vue ├── README.md └── package.json ├── .gitignore ├── vue.config.js ├── package.json ├── meta.json ├── README.md └── Gruntfile.js /template/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | _site -------------------------------------------------------------------------------- /template/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@vue/app" 4 | ] 5 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | npm-debug.log 4 | .idea 5 | _site -------------------------------------------------------------------------------- /template/public/v.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/disjfa/vuetify-sidebar-template/HEAD/template/public/v.png -------------------------------------------------------------------------------- /template/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/disjfa/vuetify-sidebar-template/HEAD/template/public/favicon.ico -------------------------------------------------------------------------------- /template/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "extends": [ 4 | "plugin:vue/essential", 5 | "@vue/airbnb" 6 | ] 7 | } -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | publicPath: process.env.NODE_ENV === 'production' 3 | ? '/vuetify-sidebar-template' // prod 4 | : '/', // dev 5 | }; 6 | -------------------------------------------------------------------------------- /template/public/img/icons/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/disjfa/vuetify-sidebar-template/HEAD/template/public/img/icons/android-chrome-192x192.png -------------------------------------------------------------------------------- /template/public/img/icons/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/disjfa/vuetify-sidebar-template/HEAD/template/public/img/icons/android-chrome-512x512.png -------------------------------------------------------------------------------- /template/src/css/main.css: -------------------------------------------------------------------------------- 1 | .intro { 2 | display: flex; 3 | justify-content: center; 4 | margin: 4rem 0; 5 | } 6 | 7 | a { 8 | color: inherit; 9 | } 10 | 11 | .text-center { 12 | text-align: center; 13 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vuetify-sidebar-template", 3 | "description": "Forked webpack simple from official vue docs", 4 | "author": "Disjfa ", 5 | "private": true, 6 | "scripts": { 7 | "gh-pages": "gh-pages -d template/dist" 8 | }, 9 | "dependencies": { 10 | "gh-pages": "^1.2.0" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /template/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Vuetify from 'vuetify'; 3 | import VueRouter from 'vue-router'; 4 | import App from './App.vue'; 5 | import router from './router'; 6 | import './registerServiceWorker'; 7 | 8 | Vue.use(Vuetify); 9 | Vue.use(VueRouter); 10 | 11 | new Vue({ // eslint-disable-line no-new 12 | el: '#app', 13 | router, 14 | render: h => h(App), 15 | }); 16 | -------------------------------------------------------------------------------- /template/README.md: -------------------------------------------------------------------------------- 1 | # {{ name }} 2 | 3 | {{ description }} 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | ## Develop 19 | 20 | Run `npm run dev` and go to `http://localhost:8081/` to check the page. 21 | 22 | -------------------------------------------------------------------------------- /meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "prompts": { 3 | "name": { 4 | "type": "string", 5 | "required": true, 6 | "label": "Project name" 7 | }, 8 | "description": { 9 | "type": "string", 10 | "required": true, 11 | "label": "Project description", 12 | "default": "A Vue.js project" 13 | }, 14 | "author": { 15 | "type": "string", 16 | "label": "Author" 17 | } 18 | }, 19 | "completeMessage": "To get started:\n\n cd {{destDirName}}\n npm install\n npm run dev" 20 | } -------------------------------------------------------------------------------- /template/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Vuetify sidebar template", 3 | "short_name": "Vuetify template", 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": "#3f51b5 " 20 | } -------------------------------------------------------------------------------- /template/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Vuetify sidebar template 10 | 11 | 12 | 15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vuetify-sidebar-template 2 | 3 | > A boilerplate using the vuetify library. A basic setup for a sidebar using `vue-router` 4 | 5 | ### Usage 6 | 7 | This is a project template for [vue-cli](https://github.com/vuejs/vue-cli). 8 | 9 | ``` bash 10 | $ npm install -g @vue/cli @vue/cli-init 11 | $ vue init disjfa/vuetify-sidebar-template my-project 12 | $ cd my-project 13 | $ npm install 14 | $ npm run serve 15 | ``` 16 | 17 | ### What's Included 18 | 19 | - `npm run serve`: Test your site on your local machine with proper config for source maps & hot-reload. 20 | 21 | - `npm run build`: build the website. 22 | 23 | ### Fork It And Make Your Own 24 | 25 | You can fork this repo to create your own boilerplate, and use it with `vue-cli`: 26 | 27 | ``` bash 28 | vue init username/repo my-project 29 | ``` -------------------------------------------------------------------------------- /template/src/registerServiceWorker.js: -------------------------------------------------------------------------------- 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('App is being served from cache by a service worker.\n' + 9 | 'For more details, visit https://goo.gl/AFskqB'); 10 | }, 11 | cached() { 12 | console.log('Content has been cached for offline use.'); 13 | }, 14 | updated() { 15 | console.log('New content is available; please refresh.'); 16 | }, 17 | offline() { 18 | console.log('No internet connection found. App is running in offline mode.'); 19 | }, 20 | error(error) { 21 | console.error('Error during service worker registration:', error); 22 | }, 23 | }); 24 | } 25 | -------------------------------------------------------------------------------- /template/src/router.js: -------------------------------------------------------------------------------- 1 | import Router from 'vue-router'; 2 | import HomePage from './pages/HomePage.vue'; 3 | import AboutPage from './pages/AboutPage.vue'; 4 | import ExamplePage from './pages/ExamplePage.vue'; 5 | // import messagesRoutes from '@/modules/messages/router'; 6 | // import peopleRoutes from '@/modules/people/router'; 7 | 8 | const baseRoutes = [ 9 | { 10 | path: '/home', 11 | name: 'home', 12 | component: HomePage, 13 | }, 14 | { 15 | path: '/about', 16 | name: 'about', 17 | component: AboutPage, 18 | }, 19 | { 20 | path: '/examples', 21 | name: 'examples', 22 | component: ExamplePage, 23 | }, 24 | { 25 | path: '*', 26 | redirect: { 27 | name: 'home', 28 | }, 29 | }, 30 | ]; 31 | 32 | // const routes = baseRoutes.concat(messagesRoutes, peopleRoutes); 33 | const routes = baseRoutes; 34 | export default new Router({ 35 | routes, 36 | }); 37 | -------------------------------------------------------------------------------- /template/src/pages/HomePage.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 30 | -------------------------------------------------------------------------------- /template/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vuetify-sidebar-template", 3 | "description": "Forked webpack simple from official vue docs", 4 | "author": "Disjfa ", 5 | "private": true, 6 | "scripts": { 7 | "serve": "vue-cli-service serve", 8 | "build": "vue-cli-service build", 9 | "test": "vue-cli-service test", 10 | "lint": "vue-cli-service lint" 11 | }, 12 | "dependencies": { 13 | "@vue/cli-plugin-babel": "^3.3.0", 14 | "@vue/cli-plugin-eslint": "^3.3.0", 15 | "@vue/cli-plugin-pwa": "^3.3.0", 16 | "@vue/cli-service": "^3.3.0", 17 | "@vue/eslint-config-airbnb": "^3.0.5", 18 | "chai": "^4.2.0", 19 | "lint-staged": "^7.3.0", 20 | "register-service-worker": "^1.5.2", 21 | "vue": "^2.5.21", 22 | "vue-router": "^3.0.2", 23 | "vue-template-compiler": "^2.5.21", 24 | "vuetify": "^1.4.1", 25 | "webpack": "^4.28.4" 26 | }, 27 | "devDependencies": { 28 | "style-loader": "^0.23.1", 29 | "stylus": "^0.54.5", 30 | "stylus-loader": "^3.0.2" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /template/src/pages/AboutPage.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 32 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function (grunt) { 2 | grunt.initConfig({ 3 | copy: { 4 | push: { 5 | files: [ 6 | // includes files within path and its sub-directories 7 | { 8 | expand: true, 9 | cwd: 'template', 10 | src: [ 11 | 'index.html', 12 | 'dist/**', 13 | 'public/**' 14 | ], 15 | dest: '_site/' 16 | }, 17 | ], 18 | }, 19 | }, 20 | buildcontrol: { 21 | options: { 22 | dir: '_site', 23 | commit: true, 24 | push: true, 25 | message: 'Built %sourceName% from commit %sourceCommit% on branch %sourceBranch%' 26 | }, 27 | pages: { 28 | options: { 29 | remote: 'git@github.com:disjfa/vuetify-sidebar-template.git', 30 | branch: 'gh-pages' 31 | } 32 | } 33 | } 34 | }); 35 | 36 | grunt.loadNpmTasks('grunt-build-control'); 37 | grunt.loadNpmTasks('grunt-contrib-copy'); 38 | 39 | grunt.registerTask('push', ['copy', 'buildcontrol']); 40 | }; 41 | -------------------------------------------------------------------------------- /template/src/App.vue: -------------------------------------------------------------------------------- 1 | 43 | 44 | 74 | 75 | 79 | -------------------------------------------------------------------------------- /template/src/pages/ExamplePage.vue: -------------------------------------------------------------------------------- 1 | 63 | 64 | 76 | --------------------------------------------------------------------------------