Skip to content

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

Open
@itelmenko

Description

@itelmenko

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions