diff --git a/docs/content/1.getting-started/2.installation.md b/docs/content/1.getting-started/2.installation.md index bf4ac443..e70438a3 100644 --- a/docs/content/1.getting-started/2.installation.md +++ b/docs/content/1.getting-started/2.installation.md @@ -36,8 +36,114 @@ export default defineNuxtConfig({ That's it! You can now use all the components and composables in your Nuxt app ✨ +## Modules + +Nuxt UI will automatically install the [@nuxtjs/tailwindcss](https://tailwindcss.nuxtjs.org/), [@nuxtjs/color-mode](https://color-mode.nuxtjs.org/) and [nuxt-icon](https://github.com/nuxt-modules/icon) modules for you. + ::callout{icon="i-heroicons-exclamation-triangle"} -As this module installs [@nuxtjs/tailwindcss](https://tailwindcss.nuxtjs.org/) and [@nuxtjs/color-mode](https://color-mode.nuxtjs.org/) for you, you should remove them from your `modules` and `dependencies` if you've previously installed them manually. +You should remove them from your `modules` and `dependencies` if you've previously installed them. +:: + +### `@nuxtjs/tailwindcs` + +This module is pre-configured and will automatically load the following plugins: + +- [@tailwindcss/forms](https://github.com/tailwindlabs/tailwindcss-forms) +- [@tailwindcss/typography](https://github.com/tailwindlabs/tailwindcss-typography) +- [@tailwindcss/aspect-ratio](https://github.com/tailwindlabs/tailwindcss-aspect-ratio) +- [@tailwindcss/container-queries](https://github.com/tailwindlabs/tailwindcss-container-queries) +- [@headlessui/tailwindcss](https://github.com/tailwindlabs/headlessui/tree/main/packages/%40headlessui-vue) + +Note that the `@tailwindcss/aspect-ratio` plugin disables the default aspect ratio utilities: + +- `aspect-auto` +- `aspect-square` +- `aspect-video` + +You can re-enable them by adding the following to your `tailwind.config.ts`: + +```ts [tailwind.config.ts] +import type { Config } from 'tailwindcss' + +export default >{ + theme: { + extend: { + aspectRatio: { + auto: 'auto', + square: '1 / 1', + video: '16 / 9' + } + } + } +} +``` + +### `@nuxtjs/color-mode` + +This module is installed to provide dark mode support out of the box thanks to the Tailwind CSS dark mode `class` strategy. + +::callout{icon="i-heroicons-light-bulb"} +You can read more about this in the [Theming](/getting-started/theming#dark-mode) section. +:: + +### `nuxt-icon` + +This module is installed when using the `dynamic` prop on the `Icon` component or globally through the `ui.icons.dynamic` option in your `app.config.ts`. + +::callout{icon="i-heroicons-light-bulb"} +You can read more about this in the [Theming](/getting-started/theming#dynamic-icons) section and on the [Icon](/elements/icon) component page. +:: + +## TypeScript + +This module is written in TypeScript and provides typings for all the components and composables. You can look at the [source code](https://github.com/nuxt/ui/tree/dev/src/runtime/types) to see all the available types. + +::callout{icon="i-heroicons-light-bulb" to="https://nuxt.com/docs/guide/concepts/typescript" target="_blank"} +You can read more about TypeScript on the official Nuxt documentation. +:: + +You can use those types in your own components by importing them from `#ui/types`, for example when defining wrapper components: + +```vue + + + +``` + +You don't have to use TypeScript yourself, but doing so will give you access to prop validation and autocomplete. + +We've managed to provide dynamic typings on props such as `color`, `size`, `variant`, etc. based on your custom config. For example, you'll be suggested the `custom` color and the `subtle` variant when using the `Button` component with an `app.config.ts` as such: + +```ts [app.config.ts] +export default defineAppConfig({ + ui: { + button: { + color: { + custom: { + subtle: '...' + } + } + } + } +}) +``` + +::callout{icon="i-heroicons-light-bulb"} +You can read more about components configuration in the [Theming](/getting-started/theming#appconfigts) section. :: ## IntelliSense