arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 12:14:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs(getting-started): use ::steps and mention css files

Browse Source
This commit is contained in:
Benjamin Canac
2024-11-09 22:03:49 +01:00
parent 761afaf40d
commit 95be76940c
7 changed files with 132 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -14,7 +14,9 @@ select:
## Setup
1. Install the Nuxt UI v3 alpha package:
::steps{level="4"}
#### Install the Nuxt UI v3 alpha package
::code-group{sync="pm"}
@@ -37,10 +39,10 @@ bun add @nuxt/ui@next
::
::warning
If you're using **pnpm**, ensure that you either set [`shamefully-hoist=true`](https://pnpm.io/npmrc#shamefully-hoist) in your `.npmrc` file or install `tailwindcss@next` directly in your project's root directory.
If you're using **pnpm**, ensure that you either set [`shamefully-hoist=true`](https://pnpm.io/npmrc#shamefully-hoist) in your `.npmrc` file or install `tailwindcss@next` in your project's root directory.
::
2. Register the Nuxt UI module in your `nuxt.config.ts`{lang="ts-type"}:
#### Add the Nuxt UI module in your `nuxt.config.ts`{lang="ts-type"}
```ts [nuxt.config.ts]
export default defineNuxtConfig({
@@ -48,15 +50,24 @@ export default defineNuxtConfig({
})
```
3. Import Tailwind CSS and Nuxt UI in your `app.vue`{lang="ts-type"} or [CSS](https://nuxt.com/docs/getting-started/styling#the-css-property):
#### Import Tailwind CSS and Nuxt UI in your CSS
```vue [app.vue]
<style>
```css [assets/css/main.css]
@import "tailwindcss";
@import "@nuxt/ui";
</style>
```
::note
Use the `css` property in your `nuxt.config.ts` to import your CSS file.
```ts [nuxt.config.ts]
export default defineNuxtConfig({
modules: ['@nuxt/ui'],
css: ['~/assets/css/main.css']
})
```
::
::tip
It's recommended to install the [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) extension for VSCode and add the following settings:
```json
@@ -70,8 +81,6 @@ It's recommended to install the [Tailwind CSS IntelliSense](https://marketplace.
::
::warning
IntelliSense works better when importing `tailwindcss` in a proper `.css` file which will be automatically detected.
::
## Options