Update with-vuetify example with theme overrides

examples/with-vuetify/README.md

@@ -1,4 +1,6 @@
 # Using Vuetify.js with Nuxt.js
 
-https://nuxtjs.org/examples/with-vuetify
+https://nuxtjs.org/examples/with-vuetify<br>
 https://vuetifyjs.com/
+
+*NOTE: Some Vuetify components needs Vue v2.2.x (or later) to work properly (Nuxt currently uses v2.1.x)*

examples/with-vuetify/css/app.styl

@@ -0,0 +1 @@
+@require './vendor/vuetify.styl'

examples/with-vuetify/css/vendor/vuetify.styl

@@ -0,0 +1,14 @@
+// Specify overrides (theme and/or base variables etc.)
+// See https://vuetifyjs.com/quick-start
+$theme := {
+  primary: #9c27b0
+  accent: #ce93d8
+  secondary: #424242
+  info: #0D47A1
+  warning: #ffb300
+  error: #B71C1C
+  success: #2E7D32
+}
+
+// Import Vuetify styling
+@require '~vuetify/src/stylus/main.styl'

examples/with-vuetify/layouts/default.vue

@@ -1,6 +0,0 @@
-<template>
-  <div>
-    <nuxt/>
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-  </div>
-</template>

examples/with-vuetify/nuxt.config.js

@@ -1,7 +1,18 @@
+
+const { join } = require('path')
+
 module.exports = {
   build: {
     vendor: ['vuetify']
   },
   plugins: ['~plugins/vuetify.js'],
-  css: ['vuetify/dist/vuetify.min.css']
+  css: [
+    { src: join(__dirname, 'css/app.styl'), lang: 'styl' }
+  ],
+  head: {
+    link: [
+      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' },
+      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/icon?family=Material+Icons' }
+    ]
+  }
 }

examples/with-vuetify/package.json

@@ -8,5 +8,9 @@
     "dev": "nuxt",
     "build": "nuxt build",
     "start": "nuxt start"
+  },
+  "devDependencies": {
+    "stylus": "^0.54.5",
+    "stylus-loader": "^3.0.1"
   }
 }

examples/with-vuetify/pages/index.vue

@@ -16,7 +16,12 @@
       </v-sidebar>
       <v-content>
         <v-container fluid>
-          <div class="title">Main Content</div>
+          <div class="title">
+            <h2>Main content</h2>
+            <v-btn primary>Primary button</v-btn>
+            <v-btn secondary>Secondary button</v-btn>
+            <v-btn success>Success button</v-btn>
+          </div>
         </v-container>
       </v-content>
     </main>
@@ -33,7 +38,7 @@
   }
 </script>
 
-<style>
+<style scoped>
   .title {
     padding-left: 20px;
   }