Open bensladden opened 4 years ago
@bensladden I am also having trouble getting this to work. If you figure it out could you please provide your nuxt.config.js. Thanks!
@seanaye unfortunately i was unable to get it to work. I resorted to setting the colors and styles i needed manually
Any update on this? This would be a nice feature to have. I can start a PR if someone gives me a hint in the right direction. Not really sure where to start. According to #247 this should work but I can't find any docs on how
I've taken a quick look into how this feature is meant to be used. From what I can tell, you're supposed to pass a string for the preset option, which is the import path for the preset. When you build your app, the file .nuxt/vuetify/plugin.js
will be generated using this template.
For example, when I use the following Nuxt config:
// nuxt.config.js
export default {
vuetify: {
preset: 'vue-cli-plugin-vuetify-preset-rally/preset'
}
}
It seems like the .nuxt/vuetify/plugin.js
file is generated correctly (according to the Vuetify preset installation guide). If I debug into that file, I can see that the preset I am using is being set correctly on the vuetifyOptions
object.
I feel like I am close to getting this to work, but missing something since this still doesn't appear to load the preset correctly.
Thanks to what I found here I got it to partially work (using nuxt 2.12.2
& @nuxtjs/vuetify 1.11.0
)
These work (basically treated as user variables):
preset/index.js
preset/overrides.scss
These don't work (they both are normally injected directly into the relevant files by cli-plugin-utils
):
preset/variables.scss
font injection
first npm install vue-cli-plugin-vuetify-preset-rally
(maybe should be a dev dependency?)
Then in my nuxt.config.js
:
...
vuetify: {
customVariables: ["~/assets/variables.scss"],
preset: "vue-cli-plugin-vuetify-preset-rally/preset"
},
build: {
transpile: ["vue-cli-plugin-vuetify-preset-rally"],
...
}
...
Found all of those files at https://github.com/vuetifyjs/vue-cli-plugins.
I'm pretty sure installing this is a destructive operation (as is with other vue-cli add
plugins), but I think nuxt uses non-destructive plugins (npm install
and put in nuxt.config.js modules
). Probably why these aren't really working...
@brendanmatkin thanks for those tips it helped me getting this work. For Rally there are two fonts
What didn't work was fonts but adding to nuxt.conf.js
:
head: {
...
link: [
...
{
rel: 'stylesheet',
href:
'https://fonts.googleapis.com/css?family=Roboto+Condensed|Eczar&display=swap',
},
],
},
and then to `assets/variables.scss:
$body-font-family: 'Roboto Condensed';
$heading-font-family: 'Eczar';
@import '~vuetify/src/styles/styles.sass';
solved that issue
Module version "@nuxtjs/vuetify": "1.10.3", "nuxt": "2.11.0", "vue-cli-plugin-vuetify-preset-owl": "1.0.1", "vue-cli-plugin-vuetify-preset-reply": "1.0.1"
Describe the bug Presets fail to be applied (i.e. stays dark theme) No console errors
To Reproduce https://codesandbox.io/s/nuxtjs-vuetify-kynn1
Steps to reproduce the behavior:
Expected behavior I expect the theme to change to mimic the presets
Additional context Tried both owl and reply preset modules