example: add vuetify example

examples/vuetify/README.md

@@ -0,0 +1,3 @@
+# Tailwind Example
+
+Demo: [https://codesandbox.io/s/github/nuxt-community/storybook/tree/master/examples/tailwind](https://codesandbox.io/s/github/nuxt-community/storybook/tree/master/examples/tailwind)

examples/vuetify/assets/variables.scss

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

examples/vuetify/components/MyButton.stories.js

@@ -0,0 +1,4 @@
+export default { title: 'Button' }
+
+export const primaryButton = () => '<v-app><MyButton>Primary Button</MyButton><v-app>'
+export const secondaryButton = () => '<v-app><MyButton type="secondary">Secondary Button</MyButton></v-app>'

examples/vuetify/components/MyButton.vue

@@ -0,0 +1,14 @@
+<template>
+  <v-btn depressed small :color="type"><slot /></v-btn>
+</template>
+
+<script>
+export default {
+  props: {
+    type: {
+      type: String,
+      default: 'primary'
+    }
+  }
+}
+</script>

examples/vuetify/layouts/default.vue

@@ -0,0 +1,103 @@
+<template>
+  <v-app dark>
+    <v-navigation-drawer v-model="drawer" fixed clipped app>
+      <v-list>
+        <v-list-item v-for="item in items" :key="item.text" link>
+          <v-list-item-action>
+            <v-icon>{{ item.icon }}</v-icon>
+          </v-list-item-action>
+          <v-list-item-content>
+            <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>
+    <v-app-bar color="primary" dense fixed clipped-left app>
+      <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
+      <v-icon class="mx-3">
+        mdi-youtube
+      </v-icon>
+      <v-toolbar-title class="mr-5 align-center">
+        <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-main>
+      <Nuxt />
+    </v-main>
+  </v-app>
+</template>
+
+<style scoped>
+</style>
+
+<script>
+export default {
+  head: {
+    title: 'Nuxt Vuetify Starter'
+  },
+  data () {
+    return {
+      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>

examples/vuetify/nuxt.config.js

@@ -0,0 +1,10 @@
+export default {
+  components: true,
+  modules: [
+    '@nuxtjs/vuetify'
+  ],
+  vuetify: {
+    customVariables: ["~/assets/variables.scss"],
+    optionsPath: "./vuetify.options.js"
+  },
+}

examples/vuetify/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "vuetify",
+  "version": "1.0.0",
+  "license": "MIT",
+  "scripts": {
+    "serve": "nuxt storybook"
+  },
+  "dependencies": {
+    "@nuxtjs/storybook": "latest",
+    "@nuxtjs/vuetify": "latest",
+    "nuxt-edge": "latest"
+  }
+}

examples/vuetify/pages/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <v-container fill-height>
+    <v-layout justify-center align-center>
+      <v-flex shrink>
+        <v-btn icon color="test" large @click="$vuetify.theme.dark = !$vuetify.theme.dark">
+          <v-icon>mdi-theme-light-dark</v-icon>
+        </v-btn>
+      </v-flex>
+    </v-layout>
+  </v-container>
+</template>

examples/vuetify/vuetify.options.js

@@ -0,0 +1,13 @@
+import colors from "vuetify/es5/util/colors";
+
+export default {
+  theme: {
+    dark: false,
+    themes: {
+      dark: {
+        primary: colors.blue.base,
+        test: colors.green.base
+      }
+    }
+  }
+};