From 4a66a1085def32aa2be4f9e817c3e7e61e4bbf7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@chopin.io>
Date: Tue, 20 Jun 2017 01:04:23 +0200
Subject: [PATCH] Update vuetify example

---
 .../vendor/vuetify.styl => assets/app.styl}   |  2 +-
 examples/with-vuetify/css/app.styl            |  2 -
 .../css/vendor/material-icons.styl            | 21 --------
 examples/with-vuetify/layouts/default.vue     | 45 ++++++++++++++++
 examples/with-vuetify/nuxt.config.js          | 30 +++++++----
 examples/with-vuetify/package.json            |  8 ++-
 examples/with-vuetify/pages/about.vue         | 18 +++++++
 examples/with-vuetify/pages/index.vue         | 51 +++----------------
 8 files changed, 95 insertions(+), 82 deletions(-)
 rename examples/with-vuetify/{css/vendor/vuetify.styl => assets/app.styl} (86%)
 delete mode 100644 examples/with-vuetify/css/app.styl
 delete mode 100644 examples/with-vuetify/css/vendor/material-icons.styl
 create mode 100644 examples/with-vuetify/layouts/default.vue
 create mode 100644 examples/with-vuetify/pages/about.vue

diff --git a/examples/with-vuetify/css/vendor/vuetify.styl b/examples/with-vuetify/assets/app.styl
similarity index 86%
rename from examples/with-vuetify/css/vendor/vuetify.styl
rename to examples/with-vuetify/assets/app.styl
index 6865590deb..66d746eb17 100644
--- a/examples/with-vuetify/css/vendor/vuetify.styl
+++ b/examples/with-vuetify/assets/app.styl
@@ -11,4 +11,4 @@ $theme := {
 }
 
 // Import Vuetify styling
-@require '~vuetify/src/stylus/main.styl'
+@require '~vuetify/src/stylus/main.styl'
\ No newline at end of file
diff --git a/examples/with-vuetify/css/app.styl b/examples/with-vuetify/css/app.styl
deleted file mode 100644
index cd1c8f9dc8..0000000000
--- a/examples/with-vuetify/css/app.styl
+++ /dev/null
@@ -1,2 +0,0 @@
-@require './vendor/material-icons.styl'
-@require './vendor/vuetify.styl'
diff --git a/examples/with-vuetify/css/vendor/material-icons.styl b/examples/with-vuetify/css/vendor/material-icons.styl
deleted file mode 100644
index a063664368..0000000000
--- a/examples/with-vuetify/css/vendor/material-icons.styl
+++ /dev/null
@@ -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;
-}
diff --git a/examples/with-vuetify/layouts/default.vue b/examples/with-vuetify/layouts/default.vue
new file mode 100644
index 0000000000..7c8e435f8a
--- /dev/null
+++ b/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>
diff --git a/examples/with-vuetify/nuxt.config.js b/examples/with-vuetify/nuxt.config.js
index a01ebf437d..26034324a3 100644
--- a/examples/with-vuetify/nuxt.config.js
+++ b/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']
 }
diff --git a/examples/with-vuetify/package.json b/examples/with-vuetify/package.json
index baa308ca69..646947ae35 100644
--- a/examples/with-vuetify/package.json
+++ b/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",
diff --git a/examples/with-vuetify/pages/about.vue b/examples/with-vuetify/pages/about.vue
new file mode 100644
index 0000000000..4a926dad1b
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/examples/with-vuetify/pages/index.vue b/examples/with-vuetify/pages/index.vue
index 80916b3b54..52573bcb7d 100644
--- a/examples/with-vuetify/pages/index.vue
+++ b/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>
+  <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>
+</template>
\ No newline at end of file