Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-26 23:52:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add Vue Material Example

Browse Source
This commit is contained in:
Ademola Adegbuyi 2017-12-02 04:47:55 +01:00 committed by Pooya Parsa
parent 9163e48589
commit 2f372c9644
5 changed files with 155 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
examples/with-vue-material/README.md Normal file
View File

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

25
examples/with-vue-material/nuxt.config.js Normal file
View File

@ -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']
}

13
examples/with-vue-material/package.json Normal file
View File

@ -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"
}
}

106
examples/with-vue-material/pages/index.vue Normal file
View File

@ -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>

4
examples/with-vue-material/plugins/vue-material.js Normal file
View File

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