mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-11 08:33:53 +00:00
Update with-vuetify example with theme overrides
This commit is contained in:
parent
1ef13c7535
commit
c0ae85e53b
@ -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)*
|
||||
|
1
examples/with-vuetify/css/app.styl
Normal file
1
examples/with-vuetify/css/app.styl
Normal file
@ -0,0 +1 @@
|
||||
@require './vendor/vuetify.styl'
|
14
examples/with-vuetify/css/vendor/vuetify.styl
vendored
Normal file
14
examples/with-vuetify/css/vendor/vuetify.styl
vendored
Normal 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'
|
@ -1,6 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<nuxt/>
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
</div>
|
||||
</template>
|
@ -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' }
|
||||
]
|
||||
}
|
||||
}
|
||||
|
@ -8,5 +8,9 @@
|
||||
"dev": "nuxt",
|
||||
"build": "nuxt build",
|
||||
"start": "nuxt start"
|
||||
},
|
||||
"devDependencies": {
|
||||
"stylus": "^0.54.5",
|
||||
"stylus-loader": "^3.0.1"
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user