Skip to content

Commit 8c9d809

Browse files
AndreyYolkinAndreyYolkin
committed
docs: restructure styling guide and move configuration pages
1 parent cecbb22 commit 8c9d809

File tree

5 files changed

+77
-3
lines changed

5 files changed

+77
-3
lines changed

‎docs/.vitepress/config.ts‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -107,12 +107,18 @@ export default withPwa(defineConfig({
107107
text: 'Configuration',
108108
items: [
109109
{ text: 'Vuetify Options', link: '/guide/configuration/vuetify-options' },
110-
{ text: 'SASS Customization', link: '/guide/configuration/sass' },
111-
{ text: 'Experimental Cache', link: '/guide/configuration/experimental-cache' },
112110
{ text: 'Blueprints', link: '/guide/configuration/blueprints' },
113111
{ text: 'Transform Asset URLs', link: '/guide/configuration/transform-assets' },
114112
],
115113
},
114+
{
115+
text: 'Styling',
116+
items: [
117+
{ text: 'Common Setup', link: '/guide/styling/common-setup' },
118+
{ text: 'SASS Customization', link: '/guide/styling/sass' },
119+
{ text: 'Experimental Cache', link: '/guide/styling/caching' },
120+
],
121+
},
116122
{
117123
text: 'Features',
118124
items: [

docs/guide/configuration/experimental-cache.md renamed to docs/guide/styling/caching.md

File renamed without changes.

‎docs/guide/styling/common-setup.md‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
# Common Setup
2+
3+
The `styles` option in `moduleOptions` allows you to configure how Vuetify styles are handled.
4+
5+
## Configuration
6+
7+
You can configure the styles using the `styles` property in `moduleOptions`.
8+
9+
### Basic Usage
10+
11+
By default, styles are enabled (`true`). To disable them, set `styles` to `'none'`.
12+
13+
```ts
14+
export default defineNuxtConfig({
15+
modules: ['vuetify-nuxt-module'],
16+
vuetify: {
17+
moduleOptions: {
18+
styles: 'none'
19+
}
20+
}
21+
})
22+
```
23+
24+
### Vuetify 4 Features
25+
26+
If you are using Vuetify 4 (or compatible versions), you can configure specific style features like `colors` and `utilities`.
27+
28+
- `colors`: Enable/disable the standard colors palette. Default: `true`.
29+
- `utilities`: Enable/disable the standard utilities. Default: `true`.
30+
31+
::: info
32+
These options are only available for **Vuetify 4**. If you are using Vuetify 3, you should use the `configFile` option for customization.
33+
:::
34+
35+
```ts
36+
export default defineNuxtConfig({
37+
modules: ['vuetify-nuxt-module'],
38+
vuetify: {
39+
moduleOptions: {
40+
styles: {
41+
colors: false,
42+
utilities: false
43+
}
44+
}
45+
}
46+
})
47+
```
48+
49+
### SASS Customization
50+
51+
If you want to customize SASS variables (Vuetify 3+), you can provide a `configFile` path. This allows you to override global and component-level variables.
52+
53+
See [SASS Customization](/guide/styling/sass) for a detailed guide.
54+
55+
```ts
56+
export default defineNuxtConfig({
57+
modules: ['vuetify-nuxt-module'],
58+
vuetify: {
59+
moduleOptions: {
60+
styles: {
61+
configFile: 'assets/settings.scss'
62+
}
63+
}
64+
}
65+
})
66+
```
67+
68+
When using `configFile`, you can also enable [Experimental Caching](/guide/styling/caching) to improve build performance.

docs/guide/configuration/sass.md renamed to docs/guide/styling/sass.md

File renamed without changes.

‎docs/index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ features:
3939
- icon: 🎨
4040
title: Flexible Styling
4141
details: Configure Vuetify SASS variables and styling pipeline to match your design system
42-
link: /guide/configuration/sass
42+
link: /guide/styling/sass
4343
linkText: Style Guide
4444
- icon: 🧩
4545
title: Icon Strategy

0 commit comments

Comments
 (0)