Open
Description
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