Add Vue Material Example

examples/with-vue-material/README.md

@@ -0,0 +1,7 @@
+# Nuxt With Vue-Material
+
+## Compatibility
+
+Vue-Material >= 1.0.0beta
+
+[View Demo](https://nuxt-vue-material.now.sh)

examples/with-vue-material/nuxt.config.js

@@ -0,0 +1,25 @@
+module.exports = {
+  head: {
+    meta: [
+      {
+        name: 'viewport',
+        content: 'width=device-width, initial-scale=1, minimal-ui'
+      }
+    ],
+    link: [
+      {
+        rel: 'stylesheet',
+        href: 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Material+Icons'
+      },
+      {
+        rel: 'stylesheet',
+        href: 'https://unpkg.com/vue-material@beta/dist/vue-material.min.css'
+      },
+      {
+        rel: 'stylesheet',
+        href: 'https://unpkg.com/vue-material@beta/dist/theme/default.css'
+      }
+    ]
+  },
+  plugins: ['~/plugins/vue-material']
+}

examples/with-vue-material/package.json

@@ -0,0 +1,13 @@
+{
+	"name": "with-vue-material",
+	"version": "1.0.0",
+	"dependencies": {
+		"nuxt": "latest",
+		"vue-material": "^1.0.0-beta-6"
+	},
+	"scripts": {
+		"dev": "nuxt",
+		"build": "nuxt build",
+		"start": "nuxt start"
+	}
+}

examples/with-vue-material/pages/index.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="page-container md-layout-column">
+    <md-toolbar class="md-primary">
+      <md-button class="md-icon-button" @click="showNavigation = true">
+        <md-icon>menu</md-icon>
+      </md-button>
+      <span class="md-title">Nuxt + Vue Material</span>
+
+      <div class="md-toolbar-section-end">
+        <md-button @click="showSidepanel = true">Favorites</md-button>
+      </div>
+    </md-toolbar>
+
+    <md-drawer :md-active.sync="showNavigation">
+      <md-toolbar class="md-transparent" md-elevation="0">
+        <span class="md-title">My App name</span>
+      </md-toolbar>
+
+      <md-list>
+        <md-list-item>
+          <md-icon>move_to_inbox</md-icon>
+          <span class="md-list-item-text">Inbox</span>
+        </md-list-item>
+
+        <md-list-item>
+          <md-icon>send</md-icon>
+          <span class="md-list-item-text">Sent Mail</span>
+        </md-list-item>
+
+        <md-list-item>
+          <md-icon>delete</md-icon>
+          <span class="md-list-item-text">Trash</span>
+        </md-list-item>
+
+        <md-list-item>
+          <md-icon>error</md-icon>
+          <span class="md-list-item-text">Spam</span>
+        </md-list-item>
+      </md-list>
+    </md-drawer>
+
+    <md-drawer class="md-right" :md-active.sync="showSidepanel">
+      <md-toolbar class="md-transparent" md-elevation="0">
+        <span class="md-title">Favorites</span>
+      </md-toolbar>
+
+      <md-list>
+        <md-list-item>
+          <span class="md-list-item-text">Abbey Christansen</span>
+
+          <md-button class="md-icon-button md-list-action">
+            <md-icon class="md-primary">chat_bubble</md-icon>
+          </md-button>
+        </md-list-item>
+
+        <md-list-item>
+          <span class="md-list-item-text">Alex Nelson</span>
+
+          <md-button class="md-icon-button md-list-action">
+            <md-icon class="md-primary">chat_bubble</md-icon>
+          </md-button>
+        </md-list-item>
+
+        <md-list-item>
+          <span class="md-list-item-text">Mary Johnson</span>
+
+          <md-button class="md-icon-button md-list-action">
+            <md-icon>chat_bubble</md-icon>
+          </md-button>
+        </md-list-item>
+      </md-list>
+    </md-drawer>
+
+    <md-content>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.
+    </md-content>
+  </div>
+</template>
+
+<script>
+	export default {
+		name: 'Sidenav',
+		data: () => ({
+			showNavigation: false,
+			showSidepanel: false
+		})
+	}
+</script>
+
+<style scoped>
+	.page-container {
+		min-height: 100vh;
+		overflow: hidden;
+		position: relative;
+		border: 1px solid rgba(#000, 0.12);
+	}
+
+	.md-drawer {
+		width: 230px;
+		max-width: calc(100vw - 125px);
+	}
+
+	.md-content {
+		padding: 16px;
+	}
+</style>

examples/with-vue-material/plugins/vue-material.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import VueMaterial from 'vue-material'
+
+Vue.use(VueMaterial)