docs(content): lint fix

docs/content/1.getting-started/1.index.md

@@ -79,6 +79,7 @@ Learn how to install and configure Nuxt UI in a Vue project in the **Vue install
 We want to be transparent: migrating from Nuxt UI v2 to v3 will require significant effort. While we've maintained core concepts and components, Nuxt UI v3 has been rebuilt from the ground up, resulting in a new library with enhanced capabilities.
 
 Key points to consider:
+
 - A comprehensive migration guide will be available in the coming weeks.
 - Review the new documentation and components carefully before attempting to upgrade.
 - If you encounter any issues, please report them on our [GitHub repository](https://github.com/nuxt/ui/issues).

docs/content/1.getting-started/2.installation/1.nuxt.md

@@ -65,6 +65,7 @@ export default defineNuxtConfig({
   css: ['~/assets/css/main.css']
 })
 ```
+
 ::
 
 ::callout{icon="i-simple-icons-visualstudiocode"}

docs/content/1.getting-started/2.installation/2.vue.md

@@ -68,6 +68,7 @@ Nuxt UI registers `unplugin-auto-import` and `unplugin-vue-components`, which wi
 auto-imports.d.ts
 components.d.ts
 ```
+
 ::
 
 #### Use the Nuxt UI Vue plugin in your `main.ts`
@@ -107,6 +108,7 @@ app.use(ui)
 
 app.mount('#app')
 ```
+
 ::
 
 ::callout{icon="i-simple-icons-visualstudiocode"}

docs/content/1.getting-started/3.theme.md

@@ -14,6 +14,7 @@ Tailwind CSS v4 takes a CSS-first configuration approach, you now customize your
 ::module-only
 #ui
 :::div
+
 ```css [main.css]
 @import "tailwindcss";
 @import "@nuxt/ui";
@@ -36,10 +37,12 @@ Tailwind CSS v4 takes a CSS-first configuration approach, you now customize your
   --color-green-950: #052E16;
 }
 ```
+
 :::
 
 #ui-pro
 :::div
+
 ```css [main.css]
 @import "tailwindcss";
 @import "@nuxt/ui-pro";
@@ -62,6 +65,7 @@ Tailwind CSS v4 takes a CSS-first configuration approach, you now customize your
   --color-green-950: #052E16;
 }
 ```
+
 :::
 ::
 
@@ -80,22 +84,26 @@ This can be useful when writing Tailwind classes in markdown files with [`@nuxt/
 ::module-only
 #ui
 :::div
+
 ```css [main.css]
 @import "tailwindcss";
 @import "@nuxt/ui";
 
 @source "../content";
 ```
+
 :::
 
 #ui-pro
 :::div
+
 ```css [main.css]
 @import "tailwindcss";
 @import "@nuxt/ui-pro";
 
 @source "../content";
 ```
+
 :::
 ::
 
@@ -110,22 +118,26 @@ You can use the `@plugin` directive to import Tailwind CSS plugins.
 ::module-only
 #ui
 :::div
+
 ```css [main.css]
 @import "tailwindcss";
 @import "@nuxt/ui";
 
 @plugin "@tailwindcss/typography";
 ```
+
 :::
 
 #ui-pro
 :::div
+
 ```css [main.css]
 @import "tailwindcss";
 @import "@nuxt/ui-pro";
 
 @plugin "@tailwindcss/typography";
 ```
+
 :::
 ::
 
@@ -172,6 +184,7 @@ export default defineAppConfig({
   }
 })
 ```
+
 ::
 
 #vue
@@ -197,6 +210,7 @@ export default defineConfig({
   ]
 })
 ```
+
 ::
 
 ::
@@ -240,6 +254,7 @@ export default defineNuxtConfig({
   }
 })
 ```
+
 :::
 
 #vue
@@ -267,6 +282,7 @@ export default defineConfig({
   ]
 })
 ```
+
 :::
 ::
 
@@ -278,6 +294,7 @@ However, you can generate these classes using Tailwind's `@theme` directive, all
 ::module-only
 #ui
 :::div{class="*:!mb-0 *:!mt-2.5"}
+
 ```css [main.css]
 @import "tailwindcss";
 @import "@nuxt/ui";
@@ -296,10 +313,12 @@ However, you can generate these classes using Tailwind's `@theme` directive, all
   --color-primary-950: var(--ui-color-primary-950);
 }
 ```
+
 :::
 
 #ui-pro
 :::div{class="*:!mb-0 *:!mt-2.5"}
+
 ```css [main.css]
 @import "tailwindcss";
 @import "@nuxt/ui-pro";
@@ -318,6 +337,7 @@ However, you can generate these classes using Tailwind's `@theme` directive, all
   --color-primary-950: var(--ui-color-primary-950);
 }
 ```
+
 :::
 ::
 
@@ -367,6 +387,7 @@ You can change which shade is used for each color on light and dark mode:
 ::module-only
 #ui
 :::div{class="*:!mb-0 *:!mt-2.5"}
+
 ```css [main.css]
 @import "tailwindcss";
 @import "@nuxt/ui";
@@ -379,10 +400,12 @@ You can change which shade is used for each color on light and dark mode:
   --ui-primary: var(--ui-color-primary-200);
 }
 ```
+
 :::
 
 #ui-pro
 :::div{class="*:!mb-0 *:!mt-2.5"}
+
 ```css [main.css]
 @import "tailwindcss";
 @import "@nuxt/ui-pro";
@@ -395,6 +418,7 @@ You can change which shade is used for each color on light and dark mode:
   --ui-primary: var(--ui-color-primary-200);
 }
 ```
+
 :::
 ::
 
@@ -486,6 +510,7 @@ body {
   @apply antialiased text-[var(--ui-text)] bg-[var(--ui-bg)];
 }
 ```
+
 ::
 
 ::tip
@@ -494,6 +519,7 @@ You can customize these CSS variables to tailor the appearance of your applicati
 ::module-only
 #ui
 :::div{class="*:!mb-0 *:!mt-2.5"}
+
 ```css [main.css]
 @import "tailwindcss";
 @import "@nuxt/ui";
@@ -508,10 +534,12 @@ You can customize these CSS variables to tailor the appearance of your applicati
   --ui-border: var(--ui-color-neutral-900);
 }
 ```
+
 :::
 
 #ui-pro
 :::div{class="*:!mb-0 *:!mt-2.5"}
+
 ```css [main.css]
 @import "tailwindcss";
 @import "@nuxt/ui-pro";
@@ -526,6 +554,7 @@ You can customize these CSS variables to tailor the appearance of your applicati
   --ui-border: var(--ui-color-neutral-900);
 }
 ```
+
 :::
 ::
 
@@ -551,6 +580,7 @@ You can customize the default radius value using the default Tailwind CSS variab
 ::module-only
 #ui
 :::div{class="*:!mb-0 *:!mt-2.5"}
+
 ```css [main.css]
 @import "tailwindcss";
 @import "@nuxt/ui";
@@ -559,10 +589,12 @@ You can customize the default radius value using the default Tailwind CSS variab
   --ui-radius: var(--radius-sm);
 }
 ```
+
 :::
 
 #ui-pro
 :::div{class="*:!mb-0 *:!mt-2.5"}
+
 ```css [main.css]
 @import "tailwindcss";
 @import "@nuxt/ui-pro";
@@ -571,6 +603,7 @@ You can customize the default radius value using the default Tailwind CSS variab
   --ui-radius: var(--radius-sm);
 }
 ```
+
 :::
 ::
 
@@ -592,6 +625,7 @@ You can customize the default container width using the default Tailwind CSS var
 ::module-only
 #ui
 :::div{class="*:!mb-0 *:!mt-2.5"}
+
 ```css [main.css]
 @import "tailwindcss";
 @import "@nuxt/ui";
@@ -604,10 +638,12 @@ You can customize the default container width using the default Tailwind CSS var
   --ui-container: var(--container-8xl);
 }
 ```
+
 :::
 
 #ui-pro
 :::div{class="*:!mb-0 *:!mt-2.5"}
+
 ```css [main.css]
 @import "tailwindcss";
 @import "@nuxt/ui-pro";
@@ -620,6 +656,7 @@ You can customize the default container width using the default Tailwind CSS var
   --ui-container: var(--container-8xl);
 }
 ```
+
 :::
 ::
 
@@ -758,6 +795,7 @@ You can explore the theme for each component in two ways:
 
 - Check the `Theme` section in the documentation of each individual component.
 - Browse the source code directly in the GitHub repository at [`v3/src/theme`](https://github.com/nuxt/ui/tree/v3/src/theme).
+
 ::
 
 ### Config
@@ -780,6 +818,7 @@ export default defineAppConfig({
   }
 })
 ```
+
 ::
 
 #vue
@@ -808,6 +847,7 @@ export default defineConfig({
   ]
 })
 ```
+
 ::
 
 ::

docs/content/1.getting-started/4.icons/1.nuxt.md

@@ -34,7 +34,7 @@ props:
 ::
 
 ::note
-You can use any name from the https://icones.js.org collection.
+You can use any name from the <https://icones.js.org> collection.
 ::
 
 ### Component Props

docs/content/1.getting-started/4.icons/2.vue.md

@@ -28,7 +28,7 @@ props:
 ::
 
 ::note
-You can use any name from the https://icones.js.org collection.
+You can use any name from the <https://icones.js.org> collection.
 ::
 
 ### Component Props

docs/content/1.getting-started/5.fonts.md

@@ -16,6 +16,7 @@ Nuxt UI automatically registers the [`@nuxt/fonts`](https://github.com/nuxt/font
 ::module-only
 #ui
 :::div
+
 ```css [main.css]
 @import "tailwindcss";
 @import "@nuxt/ui";
@@ -24,10 +25,12 @@ Nuxt UI automatically registers the [`@nuxt/fonts`](https://github.com/nuxt/font
   --font-sans: 'Public Sans', sans-serif;
 }
 ```
+
 :::
 
 #ui-pro
 :::div
+
 ```css [main.css]
 @import "tailwindcss";
 @import "@nuxt/ui-pro";
@@ -36,6 +39,7 @@ Nuxt UI automatically registers the [`@nuxt/fonts`](https://github.com/nuxt/font
   --font-sans: 'Public Sans', sans-serif;
 }
 ```
+
 :::
 ::
 

docs/content/1.getting-started/7.i18n/1.nuxt.md

@@ -55,8 +55,10 @@ const locale = defineLocale({
 
 ::tip
 Look at the `code` parameter, there you need to pass the iso code of the language. Example:
+
 * `hi` Hindi (language)
 * `de-AT`: German (language) as used in Austria (region)
+
 ::
 
 ### Dynamic locale

docs/content/1.getting-started/7.i18n/2.vue.md

@@ -57,8 +57,10 @@ const locale = defineLocale({
 
 ::tip
 Look at the `code` parameter, there you need to pass the iso code of the language. Example:
+
 * `hi` Hindi (language)
 * `de-AT`: German (language) as used in Austria (region)
+
 ::
 
 ### Dynamic locale

docs/content/3.components/drawer.md

@@ -243,6 +243,7 @@ export default defineNuxtConfig({
   }
 })
 ```
+
 ::
 
 ## Examples

docs/content/3.components/form.md

@@ -15,6 +15,7 @@ It works with the [FormField](/components/form-field) component to display error
 ### Schema Validation
 
 It requires two props:
+
 - `state` - a reactive object holding the form's state.
 - `schema` - a schema object from a validation library like [Zod](https://github.com/colinhacks/zod), [Yup](https://github.com/jquense/yup), [Joi](https://github.com/hapijs/joi), [Valibot](https://github.com/fabian-hiller/valibot) or [Superstruct](https://github.com/ianstormtaylor/superstruct).
 
@@ -73,6 +74,7 @@ Nested validation rules are handled using dot notation. For example, a rule like
 Use the `validate` prop to apply your own validation logic.
 
 The validation function must return a list of errors with the following attributes:
+
 - `message` - the error message to display.
 - `name` - the `name` of the `FormField` to send the error to.
 
@@ -91,6 +93,7 @@ props:
 ### Input Events
 
 The Form component automatically triggers validation when an input emits an `input`, `change`, or `blur` event.
+
 - Validation on `input` occurs **as you type**.
 - Validation on `change` occurs when you **commit to a value**.
 - Validation on `blur` happens when an input **loses focus**.

docs/content/3.components/link.md

@@ -13,7 +13,7 @@ The Link component is a wrapper around [`<NuxtLink>`](https://nuxt.com/docs/api/
 - `inactive-class` prop to set a class when the link is inactive, `active-class` is used when active.
 - `exact` prop to style with `active-class` when the link is active and the route is exactly the same as the current route.
 - `exact-query` and `exact-hash` props to style with `active-class` when the link is active and the query or hash is exactly the same as the current query or hash.
-  - use `exact-query="partial"` to style with `active-class` when the link is active and the query partially match the current query. 
+  - use `exact-query="partial"` to style with `active-class` when the link is active and the query partially match the current query.
 
 The incentive behind this is to provide the same API as NuxtLink back in Nuxt 2 / Vue 2. You can read more about it in the Vue Router [migration from Vue 2](https://router.vuejs.org/guide/migration/#removal-of-the-exact-prop-in-router-link) guide.
 

docs/content/3.components/navigation-menu.md

@@ -131,6 +131,7 @@ Each item can take a `children` array of objects with the following properties t
 - `icon?: string`
 - `class?: any`
 - `onSelect?(e: Event): void`
+
 ::
 
 ### Orientation