fix: update with-vuetify example (#3780)

examples/with-vuetify/layouts/default.vue

@@ -1,6 +1,6 @@
 <template>
   <v-app>
-    <v-toolbar>
+    <v-toolbar color="primary" dark>
       <v-toolbar-side-icon @click.native.stop="drawer = !drawer" />
       <v-toolbar-title>Toolbar</v-toolbar-title>
     </v-toolbar>

examples/with-vuetify/nuxt.config.js

@@ -1,5 +1,3 @@
-import nodeExternals from 'webpack-node-externals'
-
 export default {
   /*
   ** Head elements
@@ -7,21 +5,17 @@ export default {
   */
   head: {
     link: [
-      { rel: 'stylesheet', type: 'text/css', href: 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' }
+      {
+        rel: 'stylesheet',
+        type: 'text/css',
+        href: 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'
+      }
     ]
   },
 
   build: {
     extractCSS: true,
-    extend(config, ctx) {
+    transpile: [/^vuetify/]
-      if (ctx.isServer) {
-        config.externals = [
-          nodeExternals({
-            whitelist: [/^vuetify/]
-          })
-        ]
-      }
-    }
   },
   /*
   ** Load Vuetify into the app

examples/with-vuetify/pages/about.vue

@@ -8,10 +8,10 @@
 export default {
   data: () => ({
     images: [
-      'https://vuetifyjs.com/static/doc-images/carousel/squirrel.jpg',
+      'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg',
-      'https://vuetifyjs.com/static/doc-images/carousel/sky.jpg',
+      'https://cdn.vuetifyjs.com/images/carousel/sky.jpg',
-      'https://vuetifyjs.com/static/doc-images/carousel/bird.jpg',
+      'https://cdn.vuetifyjs.com/images/carousel/bird.jpg',
-      'https://vuetifyjs.com/static/doc-images/carousel/planet.jpg'
+      'https://cdn.vuetifyjs.com/images/carousel/planet.jpg'
     ]
   })
 }

examples/with-vuetify/pages/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="title">
     <h2>Main content</h2>
-    <v-btn primary>Primary button</v-btn>
+    <v-btn color="primary">Primary button</v-btn>
-    <v-btn secondary>Secondary button</v-btn>
+    <v-btn color="secondary">Secondary button</v-btn>
-    <v-btn success>Success button</v-btn>
+    <v-btn color="success">Success button</v-btn>
   </div>
 </template>

examples/with-vuetify/plugins/vuetify.js

@@ -8,7 +8,7 @@ import colors from 'vuetify/es5/util/colors'
 
 Vue.use(Vuetify, {
   theme: {
-    primary: '#121212', // a color that is not in the material colors palette
+    primary: '#9c27b0', // a color that is not in the material colors palette
     accent: colors.grey.darken3,
     secondary: colors.amber.darken3,
     info: colors.teal.lighten1,