Closed phifa closed 5 years ago
You need to use nuxt.config.js to modify Vuetify, and delete your vuetify.js plugin.
So your nuxt.config.js will have a vuetify object like so:
vuetify: {
customVariables: [
'~/assets/style/variables.scss'
],
theme: {
themes: {
light: {
primary: '#334451',
secondary: '#77b139',
accent: '#77b139',
error: colors.red.base,
warning: colors.orange.base,
info: '#ffffff',
success: '#77b139',
black: '#010101',
white: '#ffffff'
},
dark: {
primary: '#334451',
secondary: '#77b139',
accent: '#77b139',
error: colors.red.base,
warning: colors.orange.base,
info: '#ffffff',
success: '#77b139',
black: '#010101',
white: '#ffffff'
}
}
},
treeShake: true
},
Then you can modify your variables.scss file.
What is the difference? I am currently just referencing the plugin file like this in my nuxt.config.js:
modules: ['@/plugins/vuetify'],
I am not a contributor to this repository, but if we look under the lib directory in the code, the plugin.js file contains:
import Vue from 'vue'
<% if (options.treeShake) { %>
import Vuetify from 'vuetify/lib'
<% } else { %>
import Vuetify from 'vuetify'
<% } %>
Vue.use(Vuetify)
export default ({ app }) => {
app.vuetify = new Vuetify(<%= JSON.stringify(options.vuetifyOptions, null, 2) %>)
}
It looks like it is taking care of the plugin file for you and referencing options in nuxt.config.js.
Also, check out the module.js file. This @nuxt/vuetify-module is basically taking care of a lot of the setup and configuration for you to optimize Vuetify with Nuxt.
For instance, it looks like it is requiring a SASS loader and pulling in the main.sass file when tree shake is enabled. No need for additional plugin files, just configure your options in nuxt.config.js and then modify variables in variables.scss and you are on your way.
For example, change the font in variables.scss:
@import '~vuetify/src/styles/styles.sass';
$body-font-family: 'Roboto Condensed', sans-serif;
I have a couple projects using the vuetify object in nuxt.config.js and modified the variables.scss file and all seems to be working quite well.
Hope this helps.
Please use discord for asking question https://discordapp.com/invite/nHzfFwe Closing this as non issue, like @mgreengithelps said u shouldnt use plugin at all and should use moduel with configuration in nuxt.config
I set up a new nuxt project. I added the next branch like it says here: https://github.com/nuxt-community/vuetify-module#setup
It works. Now I want to customize SASS Variables. I created a file here:
plugins/vuetify.js
and referenced it innuxt.config.js
like somodules: ['@/plugins/vuetify'],
.This is the content of my vuetify file:
When I run
npm run dev
I get this error and the script terminates: