arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-22 16:00:39 +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

49
docs/content/1.getting-started/2.installation/2.vue.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,12 +39,12 @@ 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`, `vue-router` and `@unhead/vue` 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`, `vue-router` and `@unhead/vue` in your project's root directory.
::
2. Add the Nuxt UI Vite plugin in your `vite.config.ts`{lang="ts-type"}:
#### Add the Nuxt UI Vite plugin in your `vite.config.ts`{lang="ts-type"}
```ts [vite.config.ts]
```ts [vite.config.ts]{3,8}
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
@@ -51,7 +53,7 @@ export default defineConfig({
plugins: [
vue(),
ui()
],
]
})
```
@@ -71,28 +73,45 @@ components.d.ts
```
::
3. Register the Nuxt UI Vue plugin in your app:
#### Use the Nuxt UI Vue plugin in your `main.ts`
```ts [main.ts]
```ts [main.ts]{2,7}
import { createApp } from 'vue'
import nuxtUI from '@nuxt/ui/vue-plugin'
import ui from '@nuxt/ui/vue-plugin'
import App from './App.vue'
const app = createApp(App)
// ...
app.use(nuxtUI)
app.use(ui)
app.mount('#app')
```
4. Import Tailwind CSS and Nuxt UI in your `App.vue`{lang="ts-type"} or CSS:
#### Import Tailwind CSS and Nuxt UI in your CSS
```vue [App.vue]
<style>
```css [assets/main.css]
@import "tailwindcss";
@import "@nuxt/ui";
</style>
```
::note
Import the CSS file in your `main.ts`.
```ts [main.ts]{1}
import './assets/main.css'
import { createApp } from 'vue'
import ui from '@nuxt/ui/vue-plugin'
import App from './App.vue'
const app = createApp(App)
app.use(ui)
app.mount('#app')
```
::
::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
@@ -106,8 +125,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