Preset/s not loading

[bensladden]

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:

1. Run link above

Expected behavior I expect the theme to change to mimic the presets

Additional context Tried both owl and reply preset modules

[seanaye]

@bensladden I am also having trouble getting this to work. If you figure it out could you please provide your nuxt.config.js. Thanks!

[bensladden]

@seanaye unfortunately i was unable to get it to work. I resorted to setting the colors and styles i needed manually

[seanaye]

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

[brattonross]

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.

[brendanmatkin]

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...

[DimmuR]

@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