nuxt-community / vuetify-module

Vuetify Module for Nuxt 2
Other
628 stars 106 forks source link

Need way to move vuetify-theme-stylesheet from top of head section to any position #526

Open itelmenko opened 6 months ago

itelmenko commented 6 months ago

Is your feature request related to a problem? Please describe. I have bought Nuxt template with bootstrap. But I have included also Vuetify to this template. I have redefined Vuetify's themes.

// vuetify.ts
import '@mdi/font/css/materialdesignicons.css'

import 'vuetify/styles'
import { createVuetify } from 'vuetify'

const customDarkTheme = {
    dark: true,
    colors: {
        primary: "#f74780",
        secondary: "#03dac6",
    },
};

const customLightTheme = {
    dark: false,
    colors: {
        primary: "#f74780",
        secondary: "#00ccff",

    },
};

export default defineNuxtPlugin((app) => {
    const vuetify = createVuetify({
        // ... your configuration
        theme: {
            defaultTheme: 'custom-light',
            themes: {
                'custom-dark': customDarkTheme,
                'custom-light': customLightTheme,
            },
        },
    })
    app.vueApp.use(vuetify)
})

But "primary" const does not work, because in html is <style id="vuetify-theme-stylesheet"> in the top of head section. After this I see <link rel="stylesheet" href="/_nuxt/assets/css/vendors/bootstrap.min.css">. I have not chance move vuetify-theme-stylesheet in to the bottom of the head section.

Describe the solution you'd like We need generate css-file instead inline styles vuetify-theme-stylesheet. Then we can move it to any position in nuxt.config.ts