feat: add/update scripts, cleaned up structure, improved defaults

generator/index.js

@@ -1,3 +1,21 @@
+const fs = require('fs')
+
 module.exports = api => {
   api.render('./template')
+
+  api.extendPackage({
+    devDependencies: {
+      'vuex-pathify': '*'
+    }
+  })
+
+  api.onCreateComplete(() => {
+    const packagePath = api.resolve('package.json')
+    const package = require(packagePath)
+
+    package.scripts.serve = 'vue-cli-service serve --open'
+    package.scripts.deploy = 'yarn build && now'
+
+    fs.writeFileSync(packagePath, JSON.stringify(package, null, 2))
+  })
 }

generator/template/now.json

@@ -0,0 +1,16 @@
+{
+  "name": "vuetify",
+  "type": "static",
+  "static": {
+    "public": "dist",
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  },
+  "files": [
+    "dist"
+  ]
+}

generator/template/src/App.vue

@@ -12,6 +12,8 @@
 
 <script>
   export default {
+    name: 'App',
+
     components: {
       CoreDrawer: () => import('@/components/core/Drawer'),
       CoreFooter: () => import('@/components/core/Footer'),

generator/template/src/components/base/Btn.vue

@@ -1,9 +1,9 @@
 <script>
-  import { VCard } from 'vuetify/lib'
+  import { VBtn } from 'vuetify/lib'
 
   export default {
     name: 'Btn',
 
-    extends: VCard
+    extends: VBtn
   }
 </script>

generator/template/src/components/base/Card.vue

@@ -2,7 +2,7 @@
   import { VCard } from 'vuetify/lib'
 
   export default {
-    name: 'BaseCard',
+    name: 'Card',
 
     extends: VCard
   }

generator/template/src/components/core/AppBar.vue

@@ -1,5 +1,20 @@
 <template>
   <v-app-bar app>
-    <!--  -->
+    <v-app-bar-nav-icon @click="drawer = !drawer" />
   </v-app-bar>
 </template>
+
+<script>
+  // Utilities
+  import {
+    sync
+  } from 'vuex-pathify'
+
+  export default {
+    name: 'CoreAppBar',
+
+    computed: {
+      drawer: sync('app/drawer')
+    }
+  }
+</script>

generator/template/src/components/core/Drawer.vue

@@ -1,5 +1,31 @@
 <template>
-  <v-navigation-drawer app>
-    <!--  -->
+  <v-navigation-drawer
+    v-model="drawer"
+    app
+  >
+    <v-list nav>
+      <v-list-item to="/">
+        <v-list-item-title>Home</v-list-item-title>
+      </v-list-item>
+
+      <v-list-item to="/about">
+        <v-list-item-title>About</v-list-item-title>
+      </v-list-item>
+    </v-list>
   </v-navigation-drawer>
 </template>
+
+<script>
+  // Utilities
+  import {
+    sync
+  } from 'vuex-pathify'
+
+  export default {
+    name: 'CoreDrawer',
+
+    computed: {
+      drawer: sync('app/drawer')
+    }
+  }
+</script>

generator/template/src/components/core/Footer.vue

@@ -10,6 +10,8 @@
 
 <script>
   export default {
+    name: 'CoreFooter',
+
     data: () => ({
       date: (new Date()).getFullYear()
     })

generator/template/src/components/core/View.vue

@@ -1,5 +1,13 @@
 <template>
   <v-content>
-    <router-view />
+    <v-fade-transition mode="out-in">
+      <router-view />
+    </v-fade-transition>
   </v-content>
 </template>
+
+<script>
+  export default {
+    name: 'CoreView'
+  }
+</script>

generator/template/src/modules/app.js

@@ -0,0 +1,13 @@
+import { make } from 'vuex-pathify'
+
+const state = {
+  drawer: null
+}
+
+const mutations = make.mutations(state)
+
+export default {
+  namespaced: true,
+  state,
+  mutations
+}

generator/template/src/modules/index.js

@@ -0,0 +1 @@
+export { default as app } from './app'

generator/template/src/plugins/index.js

@@ -0,0 +1 @@
+import './base'

generator/template/src/plugins/vuetify.js

@@ -0,0 +1,6 @@
+import Vue from 'vue'
+import Vuetify from 'vuetify/lib'
+
+Vue.use(Vuetify)
+
+export default new Vuetify()

generator/template/src/router.js

@@ -1,6 +1,5 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import Home from './views/Home.vue'
 
 Vue.use(Router)
 
@@ -10,8 +9,13 @@ export default new Router({
   routes: [
     {
       path: '/',
-      name: 'home',
-      component: Home
+      name: 'Home',
+      component: () => import('@/views/home/Index')
+    },
+    {
+      path: '/about',
+      name: 'About',
+      component: () => import('@/views/about/Index')
     }
   ]
 })

generator/template/src/sass/main.scss

@@ -0,0 +1,2 @@
+// Required for modifying core defaults
+@import '~vuetify/src/styles/styles.sass';

generator/template/src/store.js

@@ -0,0 +1,12 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import pathify from 'vuex-pathify'
+
+import * as modules from './modules'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  plugins: [pathify.plugin],
+  modules
+})

generator/template/src/views/home/Index.vue

@@ -0,0 +1,19 @@
+<template>
+  <v-container
+    id="home"
+    class="fill-height"
+    tag="section"
+  >
+    <v-row
+      align="center"
+      class="fill-height"
+    >
+      <v-img
+        :src="require('@/assets/vuetify.svg')"
+        alt="Vuetify logo"
+        contain
+        height="400"
+      />
+    </v-row>
+  </v-container>
+</template>