format: apply repo prettier (3.8.1) to the folded skills tree
963 markdown files reformatted with the repository's pinned prettier so pnpm format:check covers the folded tree like every other repo file. The formatter's embedded-language pass also normalized code fences (TS semicolons, closed HTML tags in examples, lowercased CSS hex colors, one renumbered list that skipped an index). Alphanumeric token deltas vs the fold commit were audited file-by-file; all are formatter-equivalent markup normalizations plus the four sanitized skills.
This commit is contained in:
@@ -18,35 +18,31 @@ Add to Nuxt config:
|
||||
```ts
|
||||
// nuxt.config.ts
|
||||
export default defineNuxtConfig({
|
||||
modules: [
|
||||
'@unocss/nuxt',
|
||||
],
|
||||
})
|
||||
modules: ['@unocss/nuxt'],
|
||||
});
|
||||
```
|
||||
|
||||
Create config file:
|
||||
|
||||
```ts
|
||||
// uno.config.ts
|
||||
import { defineConfig, presetWind3 } from 'unocss'
|
||||
import { defineConfig, presetWind3 } from 'unocss';
|
||||
|
||||
export default defineConfig({
|
||||
presets: [
|
||||
presetWind3(),
|
||||
],
|
||||
})
|
||||
presets: [presetWind3()],
|
||||
});
|
||||
```
|
||||
|
||||
**Note:** The `uno.css` entry is automatically injected by the module.
|
||||
|
||||
## Support Status
|
||||
|
||||
| Build Tool | Nuxt 2 | Nuxt Bridge | Nuxt 3 |
|
||||
|------------|--------|-------------|--------|
|
||||
| Webpack Dev | ✅ | ✅ | 🚧 |
|
||||
| Webpack Build | ✅ | ✅ | ✅ |
|
||||
| Vite Dev | - | ✅ | ✅ |
|
||||
| Vite Build | - | ✅ | ✅ |
|
||||
| Build Tool | Nuxt 2 | Nuxt Bridge | Nuxt 3 |
|
||||
| ------------- | ------ | ----------- | ------ |
|
||||
| Webpack Dev | ✅ | ✅ | 🚧 |
|
||||
| Webpack Build | ✅ | ✅ | ✅ |
|
||||
| Vite Dev | - | ✅ | ✅ |
|
||||
| Vite Build | - | ✅ | ✅ |
|
||||
|
||||
## Configuration
|
||||
|
||||
@@ -56,17 +52,14 @@ Use a dedicated config file for best IDE support:
|
||||
|
||||
```ts
|
||||
// uno.config.ts
|
||||
import { defineConfig, presetWind3, presetIcons } from 'unocss'
|
||||
import { defineConfig, presetWind3, presetIcons } from 'unocss';
|
||||
|
||||
export default defineConfig({
|
||||
presets: [
|
||||
presetWind3(),
|
||||
presetIcons(),
|
||||
],
|
||||
presets: [presetWind3(), presetIcons()],
|
||||
shortcuts: {
|
||||
'btn': 'py-2 px-4 font-semibold rounded-lg',
|
||||
btn: 'py-2 px-4 font-semibold rounded-lg',
|
||||
},
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
### Nuxt Layers Support
|
||||
@@ -79,31 +72,34 @@ export default defineNuxtConfig({
|
||||
unocss: {
|
||||
nuxtLayers: true,
|
||||
},
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
Then in your root config:
|
||||
|
||||
```ts
|
||||
// uno.config.ts
|
||||
import config from './.nuxt/uno.config.mjs'
|
||||
import config from './.nuxt/uno.config.mjs';
|
||||
|
||||
export default config
|
||||
export default config;
|
||||
```
|
||||
|
||||
Or extend the merged config:
|
||||
|
||||
```ts
|
||||
// uno.config.ts
|
||||
import { mergeConfigs } from '@unocss/core'
|
||||
import config from './.nuxt/uno.config.mjs'
|
||||
import { mergeConfigs } from '@unocss/core';
|
||||
import config from './.nuxt/uno.config.mjs';
|
||||
|
||||
export default mergeConfigs([config, {
|
||||
// Your overrides
|
||||
shortcuts: {
|
||||
'custom': 'text-red-500',
|
||||
export default mergeConfigs([
|
||||
config,
|
||||
{
|
||||
// Your overrides
|
||||
shortcuts: {
|
||||
custom: 'text-red-500',
|
||||
},
|
||||
},
|
||||
}])
|
||||
]);
|
||||
```
|
||||
|
||||
## Common Setup Example
|
||||
@@ -111,10 +107,8 @@ export default mergeConfigs([config, {
|
||||
```ts
|
||||
// nuxt.config.ts
|
||||
export default defineNuxtConfig({
|
||||
modules: [
|
||||
'@unocss/nuxt',
|
||||
],
|
||||
})
|
||||
modules: ['@unocss/nuxt'],
|
||||
});
|
||||
```
|
||||
|
||||
```ts
|
||||
@@ -128,7 +122,7 @@ import {
|
||||
presetWind3,
|
||||
transformerDirectives,
|
||||
transformerVariantGroup,
|
||||
} from 'unocss'
|
||||
} from 'unocss';
|
||||
|
||||
export default defineConfig({
|
||||
presets: [
|
||||
@@ -145,14 +139,14 @@ export default defineConfig({
|
||||
},
|
||||
}),
|
||||
],
|
||||
transformers: [
|
||||
transformerDirectives(),
|
||||
transformerVariantGroup(),
|
||||
],
|
||||
transformers: [transformerDirectives(), transformerVariantGroup()],
|
||||
shortcuts: [
|
||||
['btn', 'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
|
||||
[
|
||||
'btn',
|
||||
'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50',
|
||||
],
|
||||
],
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
## Usage in Components
|
||||
@@ -160,12 +154,8 @@ export default defineConfig({
|
||||
```vue
|
||||
<template>
|
||||
<div class="p-4 text-center">
|
||||
<h1 class="text-3xl font-bold text-blue-600">
|
||||
Hello UnoCSS!
|
||||
</h1>
|
||||
<button class="btn mt-4">
|
||||
Click me
|
||||
</button>
|
||||
<h1 class="text-3xl font-bold text-blue-600">Hello UnoCSS!</h1>
|
||||
<button class="btn mt-4">Click me</button>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
@@ -175,9 +165,7 @@ With attributify mode:
|
||||
```vue
|
||||
<template>
|
||||
<div p="4" text="center">
|
||||
<h1 text="3xl blue-600" font="bold">
|
||||
Hello UnoCSS!
|
||||
</h1>
|
||||
<h1 text="3xl blue-600" font="bold">Hello UnoCSS!</h1>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
@@ -193,7 +181,7 @@ In development, visit `/_nuxt/__unocss` to access the UnoCSS inspector.
|
||||
- All Vite plugin features available
|
||||
- Nuxt layers config merging available
|
||||
|
||||
<!--
|
||||
<!--
|
||||
Source references:
|
||||
- https://unocss.dev/integrations/nuxt
|
||||
-->
|
||||
|
||||
Reference in New Issue
Block a user