examples(vuetify): use@nuxtjs/vuetify module (#7767)

examples/with-vuetify/README.md

@@ -6,5 +6,6 @@
 https://nuxt-with-vuetify-example.surge.sh
 
 ## Resources
-https://nuxtjs.org/examples/with-vuetify<br>
+https://github.com/nuxt-community/vuetify-module
+https://nuxtjs.org/examples/with-vuetify
 https://vuetifyjs.com/

examples/with-vuetify/assets/app.styl

@@ -1,27 +0,0 @@
-// Specify overrides (theme and/or base variables etc.)
-// See https://vuetifyjs.com/quick-start
-// And for themes customizing: https://vuetifyjs.com/style/theme
-
-// Color Palette: https://vuetifyjs.com/style/colors
-
-// Although, since version https://github.com/vuetifyjs/vuetify/releases/tag/v0.17.0, colors are no
-// longer defined **explicitly** in the stylus files.
-// you can use `import colors from 'vuetify/es5/util/colors'` in the vuetify instance, under `plugins`
-// if you only want to define your color palette.
-
-// you have to define the same palette colors just if you want to use them inside your own stylus files.
-
-@require '~vuetify/src/stylus/settings/_colors'
-
-$theme := {
-  primary:     $red.darken-2
-  accent:      $red.accent-2
-  secondary:   $grey.lighten-1
-  info:        $blue.lighten-1
-  warning:     $amber.darken-2
-  error:       $red.accent-4
-  success:     $green.lighten-2
-}
-
-// Import Vuetify styling
-@require '~vuetify/src/stylus/main'

examples/with-vuetify/assets/variabales.scss

@@ -0,0 +1 @@
+// https://github.com/nuxt-community/vuetify-module#customvariables

examples/with-vuetify/layouts/default.vue

@@ -1,41 +1,103 @@
 <template>
-  <v-app>
+  <v-app dark>
-    <v-toolbar color="primary" dark>
+    <v-navigation-drawer v-model="drawer" fixed clipped app>
-      <v-toolbar-side-icon @click.native.stop="drawer = !drawer" />
-      <v-toolbar-title>Toolbar</v-toolbar-title>
-    </v-toolbar>
-    <v-navigation-drawer v-model="drawer" left fixed app>
       <v-list>
-        <v-list-tile router nuxt href="/">
+        <v-list-item v-for="item in items" :key="item.text" link>
-          <v-list-tile-title>Home</v-list-tile-title>
+          <v-list-item-action>
-        </v-list-tile>
+            <v-icon>{{ item.icon }}</v-icon>
-        <v-list-tile router nuxt href="/about">
+          </v-list-item-action>
-          <v-list-tile-title>About</v-list-tile-title>
+          <v-list-item-content>
-        </v-list-tile>
+            <v-list-item-title>
+              {{ item.text }}
+            </v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+        <v-subheader class="mt-3 grey--text text--darken-1 text-uppercase">
+          Subscriptions
+        </v-subheader>
+        <v-list>
+          <v-list-item v-for="item in items2" :key="item.text" link>
+            <v-list-item-avatar>
+              <img :src="`https://randomuser.me/api/portraits/men/${item.picture}.jpg`" alt="">
+            </v-list-item-avatar>
+            <v-list-item-title v-text="item.text" />
+          </v-list-item>
+        </v-list>
+        <v-list-item class="mt-3">
+          <v-list-item-action>
+            <v-icon color="grey darken-1">
+              mdi-plus-circle-outline
+            </v-icon>
+          </v-list-item-action>
+          <v-list-item-title class="grey--text text--darken-1">
+            Browse Channels
+          </v-list-item-title>
+        </v-list-item>
+        <v-list-item>
+          <v-list-item-action>
+            <v-icon color="grey darken-1">
+              mdi-settings
+            </v-icon>
+          </v-list-item-action>
+          <v-list-item-title class="grey--text text--darken-1">
+            Manage Subscriptions
+          </v-list-item-title>
+        </v-list-item>
       </v-list>
     </v-navigation-drawer>
-    <main>
+    <v-app-bar color="primary" dense fixed clipped-left app>
-      <v-main>
+      <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
-        <v-container fluid>
+      <v-icon class="mx-3">
-          <nuxt />
+        mdi-youtube
-        </v-container>
+      </v-icon>
-      </v-main>
+      <v-toolbar-title class="mr-5 align-center">
-    </main>
+        <span class="title">Youtube</span>
+      </v-toolbar-title>
+      <v-spacer />
+      <v-layout row align-center style="max-width: 650px">
+        <v-text-field
+          placeholder="Search..."
+          single-line
+          append-icon="mdi-magnify"
+          color="white"
+          hide-details
+        />
+      </v-layout>
+    </v-app-bar>
+    <v-content>
+      <Nuxt />
+    </v-content>
   </v-app>
 </template>
 
+<style scoped>
+</style>
+
 <script>
 export default {
+  head: {
+    title: 'Nuxt Vuetify Starter'
+  },
   data () {
     return {
-      drawer: false
+      drawer: true,
+      items: [
+        { icon: 'mdi-home', text: 'Home' },
+        { icon: 'mdi-fire', text: 'Trending' },
+        { icon: 'mdi-youtube-subscription', text: 'Subscriptions' },
+        { icon: 'mdi-folder', text: 'Library' },
+        { icon: 'mdi-history', text: 'History' },
+        { icon: 'mdi-clock', text: 'Watch Later' },
+        { icon: 'mdi-thumb-up', text: 'Liked videos' }
+      ],
+      items2: [
+        { picture: 28, text: 'Joseph' },
+        { picture: 38, text: 'Apple' },
+        { picture: 48, text: 'Xbox Ahoy' },
+        { picture: 58, text: 'Nokia' },
+        { picture: 78, text: 'MKBHD' }
+      ]
     }
   }
 }
 </script>
-
-<style scoped>
-  .title {
-    padding-left: 20px;
-  }
-</style>

examples/with-vuetify/nuxt.config.js

@@ -1,5 +1,3 @@
-import VuetifyLoaderPlugin from 'vuetify-loader/lib/plugin'
-
 export default {
   /*
   ** Head elements
@@ -14,18 +12,14 @@ export default {
       }
     ]
   },
-
   build: {
-    plugins: [new VuetifyLoaderPlugin()],
+    extractCSS: true
-    extractCSS: true,
-    transpile: ['vuetify/lib']
   },
-  /*
+  buildModules: [
-  ** Load Vuetify into the app
+    '@nuxtjs/vuetify'
-  */
+  ],
-  plugins: ['~/plugins/vuetify'],
+  vuetify: {
-  /*
+    customVariables: ['~/assets/variables.scss'],
-  ** Load Vuetify CSS globally
+    optionsPath: './vuetify.options.js'
-  */
+  }
-  css: ['~/assets/app.styl']
 }

examples/with-vuetify/package.json

@@ -1,9 +1,7 @@
 {
   "name": "example-with-vuetify",
   "dependencies": {
-    "nuxt": "latest",
+    "nuxt": "latest"
-    "vuetify": "latest",
-    "vuetify-loader": "latest"
   },
   "scripts": {
     "dev": "nuxt",
@@ -13,7 +11,6 @@
     "post-update": "yarn upgrade --latest"
   },
   "devDependencies": {
-    "stylus": "^0.54.5",
+    "@nuxtjs/vuetify": "^1.11.2"
-    "stylus-loader": "^3.0.1"
   }
 }

examples/with-vuetify/pages/index.vue

@@ -1,14 +1,11 @@
 <template>
-  <div class="title">
+  <v-container fill-height>
-    <h2>Main content</h2>
+    <v-layout justify-center align-center>
-    <v-btn color="primary">
+      <v-flex shrink>
-      Primary button
+        <v-btn icon color="test" large @click="$vuetify.theme.dark = !$vuetify.theme.dark">
-    </v-btn>
+          <v-icon>mdi-theme-light-dark</v-icon>
-    <v-btn color="secondary">
+        </v-btn>
-      Secondary button
+      </v-flex>
-    </v-btn>
+    </v-layout>
-    <v-btn color="success">
+  </v-container>
-      Success button
-    </v-btn>
-  </div>
 </template>

examples/with-vuetify/plugins/vuetify.js

@@ -1,19 +0,0 @@
-import Vue from 'vue'
-import Vuetify from 'vuetify/lib'
-import colors from 'vuetify/es5/util/colors'
-
-// You can also specify those components you are going to use for "a la carte" build:
-// https://github.com/vuetifyjs/nuxt/blob/master/template/plugins/vuetify.js
-// https://github.com/vuetifyjs/a-la-carte/blob/master/template/src/main.js
-
-Vue.use(Vuetify, {
-  theme: {
-    primary: '#9c27b0', // a color that is not in the material colors palette
-    accent: colors.grey.darken3,
-    secondary: colors.amber.darken3,
-    info: colors.teal.lighten1,
-    warning: colors.amber.darken2,
-    error: colors.deepOrange.accent4,
-    success: colors.green.accent3
-  }
-})

examples/with-vuetify/vuetify.options.js

@@ -0,0 +1,13 @@
+import colors from 'vuetify/es5/util/colors'
+
+export default {
+  theme: {
+    dark: true,
+    themes: {
+      dark: {
+        primary: colors.red.base,
+        test: colors.blue.base
+      }
+    }
+  }
+}