- Notifications
You must be signed in to change notification settings - Fork659
The Intuitive Vue UI Library powered by Reka UI & Tailwind CSS.
License
NotificationsYou must be signed in to change notification settings
nuxt/ui
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Nuxt UI harnesses the combined strengths ofReka UI,Tailwind CSS, andTailwind Variants to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.
Note
You are on thev3 development branch, check out thev2 branch for Nuxt UI v2.
Visithttps://ui.nuxt.com to explore the documentation.
pnpm add @nuxt/ui
yarn add @nuxt/ui
npm install @nuxt/ui
bun add @nuxt/ui
- Add the Nuxt UI module in your
nuxt.config.ts:
exportdefaultdefineNuxtConfig({modules:['@nuxt/ui']})
- Import Tailwind CSS and Nuxt UI in your CSS:
@import"tailwindcss" theme(static);@import"@nuxt/ui";
Learn more in theinstallation guide.
- Add the Nuxt UI Vite plugin in your
vite.config.ts:
import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'importuifrom'@nuxt/ui/vite'exportdefaultdefineConfig({plugins:[vue(),ui()]})
- Use the Nuxt UI Vue plugin in your
main.ts:
import{createApp}from'vue'import{createRouter,createWebHistory}from'vue-router'importuifrom'@nuxt/ui/vue-plugin'importAppfrom'./App.vue'constapp=createApp(App)constrouter=createRouter({routes:[],history:createWebHistory()})app.use(router)app.use(ui)app.mount('#app')
- Import Tailwind CSS and Nuxt UI in your CSS:
@import"tailwindcss" theme(static);@import"@nuxt/ui";
Learn more in theinstallation guide.
- nuxt/nuxt
- nuxt/icon
- nuxt/fonts
- nuxt-modules/color-mode
- unovue/reka-ui
- tailwindlabs/tailwindcss
- vueuse/vueuse
Licensed under theMIT license.
About
The Intuitive Vue UI Library powered by Reka UI & Tailwind CSS.