feat(vuetify): use vuetify module (#225)

Author: lv-kit

template/_package.json

@@ -43,8 +43,7 @@
     "@adonisjs/shield": "^1.0.4"<% } %><% if (ui === 'bootstrap') { %>,
     "bootstrap-vue": "^2.0.0-rc.11",
     "bootstrap": "^4.1.3"<% } else if (ui === 'vuetify') { %>,
-    "vuetify": "^1.5.5",
-    "vuetify-loader": "^1.2.1"<% } else if (ui === 'bulma') { %>,
+    "@nuxtjs/vuetify": "0.5.5"<% } else if (ui === 'bulma') { %>,
     "@nuxtjs/bulma": "^1.2.1"<% } else if (ui === 'element-ui') { %>,
     "element-ui": "^2.4.11"<% } else if (ui === 'ant-design-vue') { %>,
     "ant-design-vue": "^1.1.10"<% } else if (ui === 'buefy') { %>,

template/frameworks/vuetify/layouts/error.vue

@@ -0,0 +1,44 @@
+<template>
+  <v-app dark>
+    <h1 v-if="error.statusCode === 404">
+      {{ pageNotFound }}
+    </h1>
+    <h1 v-else>
+      {{ otherError }}
+    </h1>
+    <NuxtLink to="/">
+      Home page
+    </NuxtLink>
+  </v-app>
+</template>
+
+<script>
+export default {
+  layout: 'empty',
+  props: {
+    error: {
+      type: Object,
+      default: null
+    }
+  },
+  head() {
+    const title =
+      this.error.statusCode === 404 ? this.pageNotFound : this.otherError
+    return {
+      title
+    }
+  },
+  data() {
+    return {
+      pageNotFound: '404 Not Found',
+      otherError: 'An error occurred',
+    }
+  }
+}
+</script>
+
+<style scoped>
+h1 {
+  font-size: 20px;
+}
+</style>

template/frameworks/vuetify/plugins/vuetify.js

@@ -1,15 +1,11 @@
 <% if (esm) { -%>
 <% if (ui === 'vuetify') { -%>
-import VuetifyLoaderPlugin from 'vuetify-loader/lib/plugin'
+import colors from 'vuetify/es5/util/colors'
 <% } -%>
 <% } else if (server === 'adonis') { -%>
 const { resolve } = require('path')
 <%} else { -%>
 <% } -%>
-<% if (!esm) { -%>
-<% if (ui === 'vuetify') { %>const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')<% } %>
-<% } -%>
-
 <% if (esm) { -%>
 export default {
 <% } else { -%>
@@ -24,6 +20,9 @@ module.exports = {
   ** Headers of the page
   */
   head: {
+    <% if (ui === 'vuetify') { %>
+    titleTemplate: '%s - ' + process.env.npm_package_name,
+    <% } %>
     title: process.env.npm_package_name || '',
     meta: [
       { charset: 'utf-8' },
@@ -50,8 +49,7 @@ module.exports = {
   */
   css: [<% if (ui === 'element-ui') { %>
     'element-ui/lib/theme-chalk/index.css'<% } else if (ui === 'tailwind') { %>
-    '~/assets/css/tailwind.css'<% } else if (ui === 'vuetify') { %>
-    '~/assets/style/app.styl'<% } else if (ui === 'iview') { %>
+    '~/assets/css/tailwind.css'<% } else if (ui === 'iview') { %>
     'iview/dist/styles/iview.css'<% } else if (ui === 'ant-design-vue') { %>
     'ant-design-vue/dist/antd.css'<% } else if (ui === 'tachyons') { %>
     'tachyons/css/tachyons.css'<% } %>
@@ -61,8 +59,7 @@ module.exports = {
   ** Plugins to load before mounting the App
   */
   plugins: [<% if (ui === 'element-ui') { %>
-    '@/plugins/element-ui'<% } else if (ui === 'vuetify') { %>
-    '@/plugins/vuetify'<% } else if (ui === 'iview') { %>
+    '@/plugins/element-ui'<% } else if (ui === 'iview') { %>
     '@/plugins/iview'<% } else if (ui === 'ant-design-vue') { %>
     '@/plugins/antd-ui'<% } %>
   ],
@@ -80,14 +77,33 @@ module.exports = {
     // Doc: https://buefy.github.io/#/documentation
     'nuxt-buefy',<% } %><% if (pwa === 'yes') { %>
     '@nuxtjs/pwa',<% } %><% if (eslint === 'yes') { %>
-    '@nuxtjs/eslint-module',<% } %>
+    '@nuxtjs/eslint-module',<% } %><% if (ui === 'vuetify') { %>
+    '@nuxtjs/vuetify',<% } %>
   ],
   <% if (axios === 'yes') { %>
   /*
   ** Axios module configuration
   ** See https://axios.nuxtjs.org/options
   */
   axios: {
+
+  },<% } %>
+
+  <% if (ui === 'vuetify') { %>
+    /*
+    ** vuetify module configuration
+    ** https://github.com/nuxt-community/vuetify-module
+    */
+  vuetify: {
+    theme: {
+      primary: colors.blue.darken2,
+      accent: colors.grey.darken3,
+      secondary: colors.amber.darken3,
+      info: colors.teal.lighten1,
+      warning: colors.amber.base,
+      error: colors.deepOrange.accent4,
+      success: colors.green.accent3
+    }
   },<% } %>
 
   /*
@@ -100,13 +116,6 @@ module.exports = {
           customProperties: false
         }
       }
-    },<% } %><% if (ui === 'vuetify') { %>
-    transpile: ['vuetify/lib'],
-    plugins: [new VuetifyLoaderPlugin()],
-    loaders: {
-      stylus: {
-        import: ['~assets/style/variables.styl']
-      }
     },<% } %><% if (ui === 'element-ui') { %>
     transpile: [/^element-ui/],
     <% } %>