Nuxt UI Pro

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![Nuxt][nuxt-src]][nuxt-href]

Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app.

- Documentation

> [!NOTE]
> You are on the v3 development branch, check out the v1 branch for Nuxt UI Pro v1.

Templates

You can get started with our minimal starter, one of our official templates or follow the Installation guide to install Nuxt UI Pro in your existing project.

- Landing
- Docs
- SaaS
- Dashboard
- Chat
- Portfolio

Installation

``bash [pnpm]
pnpm add @nuxt/ui-pro@3
`

`bash [yarn]
yarn add @nuxt/ui-pro@3
`

`bash [npm]
npm install @nuxt/ui-pro@3
`

`bash [bun]
bun add @nuxt/ui-pro@3
`

1. Add the Nuxt UI module in your nuxt.config.ts:

`ts [nuxt.config.ts]
export default defineNuxtConfig({
modules: ['@nuxt/ui-pro']
})
`

2. Import Tailwind CSS and Nuxt UI in your CSS:

`css [assets/css/main.css]
@import "tailwindcss";
@import "@nuxt/ui-pro";
`

Learn more in the installation guide.

Showcase

Here are some open-source projects using Nuxt UI Pro:

- Nuxt.com
- Nuxt Image
- Vue Email
- Unhead
- Oku

Devtools

When using the Nuxt Devtools, you can see the list of components injected by Nuxt UI Pro in the "Components' tab:

!nuxt-ui-pro-devtools


[npm-version-src]: https://img.shields.io/npm/v/@nuxt/ui-pro/latest.svg?style=flat&colorA=020420&colorB=00DC82
[npm-version-href]: https://npmjs.com/package/@nuxt/ui-pro

[npm-downloads-src]: https://img.shields.io/npm/dm/@nuxt/ui-pro.svg?style=flat&colorA=020420&colorB=00DC82
[npm-downloads-href]: https://npm.chart.dev/@nuxt/ui-pro

[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
[nuxt-href]: https://nuxt.com

License

In progress. You cannot repackage Nuxt UI Pro or copy/paste the components into premium templates, UI libraries or open source projects.