Update vuetify example

examples/with-vuetify/css/app.styl

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

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

@@ -1,21 +0,0 @@
-@font-face {
-  font-family: 'Material Icons';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5UEw0lE80llgEseQY3FEmqw.woff2) format('woff2');
-}
-.material-icons {
-  font-family: 'Material Icons';
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  -webkit-font-feature-settings: 'liga';
-  -webkit-font-smoothing: antialiased;
-}

examples/with-vuetify/layouts/default.vue

@@ -0,0 +1,45 @@
+<template>
+  <v-app>
+    <v-toolbar>
+      <v-toolbar-side-icon @click.native.stop="sidebar = !sidebar" />
+      <v-toolbar-logo>Toolbar</v-toolbar-logo>
+    </v-toolbar>
+    <v-sidebar left fixed drawer v-model="sidebar">
+      <v-list>
+        <v-list-item>
+          <v-list-tile router nuxt href="/">
+            <v-list-tile-title>Home</v-list-tile-title>
+          </v-list-tile>
+        </v-list-item>
+        <v-list-item>
+          <v-list-tile router nuxt href="/about">
+            <v-list-tile-title>About</v-list-tile-title>
+          </v-list-tile>
+        </v-list-item>
+      </v-list>
+    </v-sidebar>
+    <main>
+      <v-content>
+        <v-container fluid>
+          <nuxt/>
+        </v-container>
+      </v-content>
+    </main>
+  </v-app>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      sidebar: false
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .title {
+    padding-left: 20px;
+  }
+</style>

examples/with-vuetify/nuxt.config.js

@@ -2,16 +2,28 @@
 const { join } = require('path')
 
 module.exports = {
-  build: {
-    vendor: ['vuetify']
-  },
-  plugins: ['~plugins/vuetify.js'],
-  css: [
-    { src: join(__dirname, 'css/app.styl'), lang: 'styl' }
-  ],
+  /*
+  ** Head elements
+  ** Add Roboto font and Material Icons
+  */
   head: {
     link: [
-      { rel: 'preload', as: 'style', href: 'https://fonts.googleapis.com/css?family=Roboto' }
+      { rel: 'stylesheet', type: 'text/css', href: 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' }
     ]
-  }
+  },
+  /*
+  ** Add Vuetify into vendor.bundle.js
+  */
+  build: {
+    vendor: ['vuetify'],
+    extractCSS: true
+  },
+  /*
+  ** Load Vuetify into the app
+  */
+  plugins: ['~plugins/vuetify'],
+  /*
+  ** Load Vuetify CSS globally
+  */
+  css: ['~assets/app.styl']
 }

examples/with-vuetify/package.json

@@ -1,16 +1,14 @@
 {
   "name": "with-vuetify",
   "dependencies": {
-    "nuxt": "^0.10.7",
-    "vuetify": "^0.11.1"
+    "nuxt": "latest",
+    "vuetify": "latest"
   },
   "scripts": {
     "dev": "nuxt",
     "build": "nuxt build",
     "start": "nuxt start",
-    "generate": "nuxt generate",
-    "predeploy": "yarn run generate",
-    "deploy": "surge --domain nuxt-with-vuetify-example.surge.sh dist"
+    "generate": "nuxt generate"
   },
   "devDependencies": {
     "stylus": "^0.54.5",

examples/with-vuetify/pages/about.vue

@@ -0,0 +1,18 @@
+<template>
+  <v-carousel>
+    <v-carousel-item v-for="(src, i) in images" v-bind:src="src" :key="i"></v-carousel-item>
+  </v-carousel>
+</template>
+
+<script>
+export default {
+  data: () => ({
+    images: [
+      'https://vuetifyjs.com/static/doc-images/carousel/squirrel.jpg',
+      'https://vuetifyjs.com/static/doc-images/carousel/sky.jpg',
+      'https://vuetifyjs.com/static/doc-images/carousel/bird.jpg',
+      'https://vuetifyjs.com/static/doc-images/carousel/planet.jpg'
+    ]
+  })
+}
+</script>

examples/with-vuetify/pages/index.vue

@@ -1,45 +1,8 @@
 <template>
-  <v-app top-toolbar left-fixed-sidebar>
-    <v-toolbar>
-      <v-toolbar-side-icon @click.native.stop="sidebar = !sidebar" />
-      <v-toolbar-logo>Toolbar</v-toolbar-logo>
-    </v-toolbar>
-    <main>
-      <v-sidebar left fixed drawer v-model="sidebar">
-        <v-list>
-          <v-list-item v-for="i in 3" :key="i">
-            <v-list-tile>
-              <v-list-tile-title>Item {{ i }}</v-list-tile-title>
-            </v-list-tile>
-          </v-list-item>
-        </v-list>
-      </v-sidebar>
-      <v-content>
-        <v-container fluid>
   <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>
-  </v-app>
 </template>
-
-<script>
-  export default {
-    asyncData() {
-      return {
-        sidebar: false
-      }
-    }
-  }
-</script>
-
-<style scoped>
-  .title {
-    padding-left: 20px;
-  }
-</style>