Skip to content

Commit 61656a4

Browse files
AndreyYolkinAndreyYolkin
committed
fix(vuetify-nuxt-module): add vuetify 4+ core styles and optional utilities
Conditionally load the new modular styles (core, utilities, colors) for Vuetify 4.0.0 and above, while maintaining backward compatibility. This ensures the module works correctly with the updated Vuetify 4 styles structure.
1 parent 0d074c4 commit 61656a4

File tree

5 files changed

+48
-7
lines changed

5 files changed

+48
-7
lines changed

‎docs/guide/index.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,10 +109,19 @@ export interface MOptions {
109109
* Vuetify styles.
110110
* Specify `none` to disable Vuetify styles.
111111
*
112+
* If you are using Vuetify 3, you can only use the `configFile` option.
113+
*
114+
* The `colors` and `utilities` options are only available for Vuetify 4.
115+
*
116+
* @see https://vuetifyjs.com/en/styles/entry-points/#individual-modules
117+
*
112118
* @default true
113119
*/
114120
styles?: true | 'none' | {
115121
configFile: string
122+
} | {
123+
colors?: boolean
124+
utilities?: boolean
116125
}
117126
/**
118127
* Disable the modern SASS compiler and API.

‎packages/vuetify-nuxt-module/src/types.ts‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -240,13 +240,34 @@ export interface MOptions {
240240
prefixComposables?: boolean
241241
/**
242242
* Vuetify styles.
243-
* *
243+
*
244+
* If you are using Vuetify 3, you can only use the `configFile` option.
245+
*
246+
* The `colors` and `utilities` options are only available for Vuetify 4.
247+
*
248+
* @see https://vuetifyjs.com/en/styles/entry-points/#individual-modules
244249
* @see https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin
245250
*
246251
* @default true
247252
*/
248253
styles?: true | 'none' | {
254+
/**
255+
* Path to the custom Vuetify SASS configuration file.
256+
*/
249257
configFile: string
258+
} | {
259+
/**
260+
* Include the standard colors palette?
261+
*
262+
* @default true
263+
*/
264+
colors?: boolean
265+
/**
266+
* Include the standard utilities?
267+
*
268+
* @default true
269+
*/
270+
utilities?: boolean
250271
}
251272
/**
252273
* Disable the modern SASS compiler and API.

‎packages/vuetify-nuxt-module/src/utils/configure-nuxt.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,12 +29,20 @@ export async function configureNuxt (
2929

3030
if (styles !== 'none' && (styles as any) !== false) {
3131
nuxt.options.css ??= []
32-
if (typeof styles === 'object' && styles?.configFile) {
32+
if (typeof styles === 'object' && 'configFile' in styles) {
3333
const a = addTemplate({
3434
filename: 'vuetify.settings.scss',
3535
getContents: async () => getTemplate('vuetify/styles', await resolvePath(styles.configFile)),
3636
})
3737
nuxt.options.css.push(a.dst)
38+
} else if (ctx.vuetifyGte('4.0.0')) {
39+
nuxt.options.css.push(await resolvePath('vuetify/styles/core'))
40+
if (typeof styles === 'object' && styles?.utilities !== false) {
41+
nuxt.options.css.push(await resolvePath('vuetify/styles/utilities'))
42+
}
43+
if (typeof styles === 'object' && styles?.colors !== false) {
44+
nuxt.options.css.push(await resolvePath('vuetify/styles/colors'))
45+
}
3846
} else {
3947
nuxt.options.css.push(await resolvePath('vuetify/styles'))
4048
}

‎packages/vuetify-nuxt-module/src/utils/configure-vite.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ export function configureVite (configKey: string, nuxt: Nuxt, ctx: VuetifyNuxtCo
8181

8282
viteInlineConfig.plugins.push(vuetifyImportPlugin({ autoImport }))
8383
// exclude styles plugin
84-
if (typeof ctx.moduleOptions.styles !== 'boolean') {
84+
if ((ctx.moduleOptions.styles as any) !== false && ctx.moduleOptions.styles !== 'none') {
8585
viteInlineConfig.plugins.push(vuetifyStylesPlugin({ styles: ctx.moduleOptions.styles }, ctx.viteVersion, ctx.logger))
8686
}
8787
viteInlineConfig.plugins.push(vuetifyConfigurationPlugin(ctx), vuetifyIconsPlugin(ctx), vuetifyDateConfigurationPlugin(ctx))

‎packages/vuetify-nuxt-module/src/vite/vuetify-styles-plugin.ts‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import type { Options } from '@vuetify/loader-shared'
21
import type { Plugin } from 'vite'
2+
import type { MOptions } from '../types'
33
import type { VuetifyNuxtContext } from '../utils/config'
44
import fs from 'node:fs'
55
import fsp from 'node:fs/promises'
@@ -11,7 +11,7 @@ import semver from 'semver'
1111
import path from 'upath'
1212

1313
export function vuetifyStylesPlugin (
14-
options: Options,
14+
options: Pick<MOptions, 'styles'>,
1515
viteVersion: VuetifyNuxtContext['viteVersion'],
1616
_logger: ReturnType<typeof import('@nuxt/kit')['useLogger']>,
1717
) {
@@ -34,7 +34,7 @@ export function vuetifyStylesPlugin (
3434
throw new Error('Remove vite-plugin-vuetify from your Nuxt config file, this module registers a modified version.')
3535
}
3636

37-
if (isObject(options.styles)) {
37+
if (isObject(options.styles) && 'configFile' in options.styles) {
3838
sassVariables = true
3939
// use file import when vite version > 5.4.2
4040
// check https://github.com/vitejs/vite/pull/17909
@@ -46,6 +46,9 @@ export function vuetifyStylesPlugin (
4646
}
4747
},
4848
async resolveId (source, importer, { custom, ssr }) {
49+
if (!sassVariables) {
50+
return
51+
}
4952
if (source.startsWith(PREFIX) || source.startsWith(SSR_PREFIX)) {
5053
if (/\.s[ca]ss$/.test(source)) {
5154
return source
@@ -62,7 +65,7 @@ export function vuetifyStylesPlugin (
6265
) {
6366
const resolution = await this.resolve(source, importer, { skipSelf: true, custom })
6467
if (!resolution) {
65-
return undefined
68+
return
6669
}
6770

6871
const target = await resolveCss(resolution.id)

0 commit comments

Comments
 (0)