Update with-vuetify example with theme overrides

This commit is contained in:
Espen Bratberg 2017-03-19 08:17:32 +01:00
parent 1ef13c7535
commit c0ae85e53b
7 changed files with 41 additions and 10 deletions

View File

@ -1,4 +1,6 @@
# Using Vuetify.js with Nuxt.js
https://nuxtjs.org/examples/with-vuetify
https://nuxtjs.org/examples/with-vuetify<br>
https://vuetifyjs.com/
*NOTE: Some Vuetify components needs Vue v2.2.x (or later) to work properly (Nuxt currently uses v2.1.x)*

View File

@ -0,0 +1 @@
@require './vendor/vuetify.styl'

View File

@ -0,0 +1,14 @@
// Specify overrides (theme and/or base variables etc.)
// See https://vuetifyjs.com/quick-start
$theme := {
primary: #9c27b0
accent: #ce93d8
secondary: #424242
info: #0D47A1
warning: #ffb300
error: #B71C1C
success: #2E7D32
}
// Import Vuetify styling
@require '~vuetify/src/stylus/main.styl'

View File

@ -1,6 +0,0 @@
<template>
<div>
<nuxt/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</div>
</template>

View File

@ -1,7 +1,18 @@
const { join } = require('path')
module.exports = {
build: {
vendor: ['vuetify']
},
plugins: ['~plugins/vuetify.js'],
css: ['vuetify/dist/vuetify.min.css']
css: [
{ src: join(__dirname, 'css/app.styl'), lang: 'styl' }
],
head: {
link: [
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' },
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/icon?family=Material+Icons' }
]
}
}

View File

@ -8,5 +8,9 @@
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start"
},
"devDependencies": {
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1"
}
}

View File

@ -16,7 +16,12 @@
</v-sidebar>
<v-content>
<v-container fluid>
<div class="title">Main Content</div>
<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>
@ -33,7 +38,7 @@
}
</script>
<style>
<style scoped>
.title {
padding-left: 20px;
}