mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 12:14:41 +01:00
chore(readme): update
This commit is contained in:
62
README.md
62
README.md
@@ -9,9 +9,14 @@
|
||||
|
||||
We're thrilled to introduce Nuxt UI v3, a significant upgrade to our UI library that delivers extensive improvements and robust new capabilities. This major update harnesses the combined strengths of [Radix Vue](https://www.radix-vue.com/), [Tailwind CSS v4](https://tailwindcss.com/blog/tailwindcss-v4-alpha), and [Tailwind Variants](https://www.tailwind-variants.org/) to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.
|
||||
|
||||
## Installation
|
||||
> [!NOTE]
|
||||
> You are on the `v3` development branch, check out the [dev branch](https://github.com/nuxt/ui) for Nuxt UI v2.
|
||||
|
||||
1. Install the Nuxt UI v3 alpha package:
|
||||
## Documentation
|
||||
|
||||
Visit https://ui3.nuxt.dev to explore the documentation.
|
||||
|
||||
## Installation
|
||||
|
||||
```bash [pnpm]
|
||||
pnpm add @nuxt/ui@next
|
||||
@@ -29,10 +34,9 @@ npm install @nuxt/ui@next
|
||||
bun add @nuxt/ui@next
|
||||
```
|
||||
|
||||
> [!WARNING]
|
||||
> Make sure you have `typescript` installed in your dev dependencies.
|
||||
### Nuxt
|
||||
|
||||
2. Register the Nuxt UI module in your `nuxt.config.ts`:
|
||||
1. Add the Nuxt UI module in your `nuxt.config.ts`:
|
||||
|
||||
```ts [nuxt.config.ts]
|
||||
export default defineNuxtConfig({
|
||||
@@ -40,18 +44,54 @@ export default defineNuxtConfig({
|
||||
})
|
||||
```
|
||||
|
||||
3. Import Tailwind CSS and Nuxt UI in your `app.vue` or [CSS](https://nuxt.com/docs/getting-started/styling#the-css-property):
|
||||
2. Import Tailwind CSS and Nuxt UI in your CSS:
|
||||
|
||||
```vue [app.vue]
|
||||
<style>
|
||||
```css [assets/css/main.css]
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui";
|
||||
</style>
|
||||
```
|
||||
|
||||
## Documentation
|
||||
Learn more in the [installation guide](https://ui3.nuxt.dev/getting-started/installation).
|
||||
|
||||
Visit https://ui3.nuxt.dev to explore the documentation.
|
||||
### Vue
|
||||
|
||||
1. Add the Nuxt UI Vite plugin in your `vite.config.ts`:
|
||||
|
||||
```ts [vite.config.ts]
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import ui from '@nuxt/ui/vite'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
ui()
|
||||
]
|
||||
})
|
||||
```
|
||||
|
||||
2. Use the Nuxt UI Vue plugin in your `main.ts`:
|
||||
|
||||
```ts [main.ts]
|
||||
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')
|
||||
```
|
||||
|
||||
3. Import Tailwind CSS and Nuxt UI in your CSS:
|
||||
|
||||
```css [assets/main.css]
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui";
|
||||
```
|
||||
|
||||
Learn more in the [installation guide](https://ui3.nuxt.dev/getting-started/installation).
|
||||
|
||||
## Credits
|
||||
|
||||
|
||||
Reference in New Issue
Block a user