mirror of
https://github.com/nuxt/nuxt.git
synced 2025-02-17 06:01:34 +00:00
examples(vuetify): use@nuxtjs/vuetify module (#7767)
This commit is contained in:
Ahad Birang
GitHub
parent
775831eb30
commit
c2c6923ee4
@ -6,5 +6,6 @@
|
||||
https://nuxt-with-vuetify-example.surge.sh
|
||||
|
||||
## Resources
|
||||
https://nuxtjs.org/examples/with-vuetify<br>
|
||||
https://github.com/nuxt-community/vuetify-module
|
||||
https://nuxtjs.org/examples/with-vuetify
|
||||
https://vuetifyjs.com/
|
||||
|
||||
@ -1,27 +0,0 @@
|
||||
// Specify overrides (theme and/or base variables etc.)
|
||||
// See https://vuetifyjs.com/quick-start
|
||||
// And for themes customizing: https://vuetifyjs.com/style/theme
|
||||
|
||||
// Color Palette: https://vuetifyjs.com/style/colors
|
||||
|
||||
// Although, since version https://github.com/vuetifyjs/vuetify/releases/tag/v0.17.0, colors are no
|
||||
// longer defined **explicitly** in the stylus files.
|
||||
// you can use `import colors from 'vuetify/es5/util/colors'` in the vuetify instance, under `plugins`
|
||||
// if you only want to define your color palette.
|
||||
|
||||
// you have to define the same palette colors just if you want to use them inside your own stylus files.
|
||||
|
||||
@require '~vuetify/src/stylus/settings/_colors'
|
||||
|
||||
$theme := {
|
||||
primary: $red.darken-2
|
||||
accent: $red.accent-2
|
||||
secondary: $grey.lighten-1
|
||||
info: $blue.lighten-1
|
||||
warning: $amber.darken-2
|
||||
error: $red.accent-4
|
||||
success: $green.lighten-2
|
||||
}
|
||||
|
||||
// Import Vuetify styling
|
||||
@require '~vuetify/src/stylus/main'
|
||||
1
examples/with-vuetify/assets/variabales.scss
Normal file
1
examples/with-vuetify/assets/variabales.scss
Normal file
@ -0,0 +1 @@
|
||||
// https://github.com/nuxt-community/vuetify-module#customvariables
|
||||
@ -1,41 +1,103 @@
|
||||
<template>
|
||||
<v-app>
|
||||
<v-toolbar color="primary" dark>
|
||||
<v-toolbar-side-icon @click.native.stop="drawer = !drawer" />
|
||||
<v-toolbar-title>Toolbar</v-toolbar-title>
|
||||
</v-toolbar>
|
||||
<v-navigation-drawer v-model="drawer" left fixed app>
|
||||
<v-app dark>
|
||||
<v-navigation-drawer v-model="drawer" fixed clipped app>
|
||||
<v-list>
|
||||
<v-list-tile router nuxt href="/">
|
||||
<v-list-tile-title>Home</v-list-tile-title>
|
||||
</v-list-tile>
|
||||
<v-list-tile router nuxt href="/about">
|
||||
<v-list-tile-title>About</v-list-tile-title>
|
||||
</v-list-tile>
|
||||
<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>
|
||||
<main>
|
||||
<v-main>
|
||||
<v-container fluid>
|
||||
<nuxt />
|
||||
</v-container>
|
||||
</v-main>
|
||||
</main>
|
||||
<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-content>
|
||||
<Nuxt />
|
||||
</v-content>
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
head: {
|
||||
title: 'Nuxt Vuetify Starter'
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
drawer: false
|
||||
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>
|
||||
|
||||
<style scoped>
|
||||
.title {
|
||||
padding-left: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
import VuetifyLoaderPlugin from 'vuetify-loader/lib/plugin'
|
||||
|
||||
export default {
|
||||
/*
|
||||
** Head elements
|
||||
@ -14,18 +12,14 @@ export default {
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
build: {
|
||||
plugins: [new VuetifyLoaderPlugin()],
|
||||
extractCSS: true,
|
||||
transpile: ['vuetify/lib']
|
||||
extractCSS: true
|
||||
},
|
||||
/*
|
||||
** Load Vuetify into the app
|
||||
*/
|
||||
plugins: ['~/plugins/vuetify'],
|
||||
/*
|
||||
** Load Vuetify CSS globally
|
||||
*/
|
||||
css: ['~/assets/app.styl']
|
||||
buildModules: [
|
||||
'@nuxtjs/vuetify'
|
||||
],
|
||||
vuetify: {
|
||||
customVariables: ['~/assets/variables.scss'],
|
||||
optionsPath: './vuetify.options.js'
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,9 +1,7 @@
|
||||
{
|
||||
"name": "example-with-vuetify",
|
||||
"dependencies": {
|
||||
"nuxt": "latest",
|
||||
"vuetify": "latest",
|
||||
"vuetify-loader": "latest"
|
||||
"nuxt": "latest"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "nuxt",
|
||||
@ -13,7 +11,6 @@
|
||||
"post-update": "yarn upgrade --latest"
|
||||
},
|
||||
"devDependencies": {
|
||||
"stylus": "^0.54.5",
|
||||
"stylus-loader": "^3.0.1"
|
||||
"@nuxtjs/vuetify": "^1.11.2"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,14 +1,11 @@
|
||||
<template>
|
||||
<div class="title">
|
||||
<h2>Main content</h2>
|
||||
<v-btn color="primary">
|
||||
Primary button
|
||||
</v-btn>
|
||||
<v-btn color="secondary">
|
||||
Secondary button
|
||||
</v-btn>
|
||||
<v-btn color="success">
|
||||
Success button
|
||||
</v-btn>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
@ -1,19 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
import Vuetify from 'vuetify/lib'
|
||||
import colors from 'vuetify/es5/util/colors'
|
||||
|
||||
// You can also specify those components you are going to use for "a la carte" build:
|
||||
// https://github.com/vuetifyjs/nuxt/blob/master/template/plugins/vuetify.js
|
||||
// https://github.com/vuetifyjs/a-la-carte/blob/master/template/src/main.js
|
||||
|
||||
Vue.use(Vuetify, {
|
||||
theme: {
|
||||
primary: '#9c27b0', // a color that is not in the material colors palette
|
||||
accent: colors.grey.darken3,
|
||||
secondary: colors.amber.darken3,
|
||||
info: colors.teal.lighten1,
|
||||
warning: colors.amber.darken2,
|
||||
error: colors.deepOrange.accent4,
|
||||
success: colors.green.accent3
|
||||
}
|
||||
})
|
||||
13
examples/with-vuetify/vuetify.options.js
Normal file
13
examples/with-vuetify/vuetify.options.js
Normal file
@ -0,0 +1,13 @@
|
||||
import colors from 'vuetify/es5/util/colors'
|
||||
|
||||
export default {
|
||||
theme: {
|
||||
dark: true,
|
||||
themes: {
|
||||
dark: {
|
||||
primary: colors.red.base,
|
||||
test: colors.blue.base
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user