Setup

Introduction

Nuxt UI Pro is a premium layer built on top of Nuxt UI that provides additional components, composables and utils to build your Nuxt app. Unlike Nuxt UI low-level components, those components are oriented on structure and layout and are designed to be used as building blocks for your app.

This layer will not inject any pages or layouts, you will have to create them yourself. We believe that this provides more flexibility and allows you to build your app the way you want.

Nuxt UI Pro is already used in production on many apps so we're confident that it will help you build your app faster and better, with 10x less code.

Templates

You can get started with:

Or explore the community templates on GitHub.

Installation

1. Add @nuxt/ui-pro dependency to your project:

pnpm i @nuxt/ui-pro

2. Extend @nuxt/ui-pro layer and register @nuxt/ui module in your nuxt.config:

export default defineNuxtConfig({
  extends: ['@nuxt/ui-pro'],
  modules: ['@nuxt/ui']
})

Start your development server, you should now be able to use all the components, composables and utils from Nuxt UI Pro 🚀

License

Nuxt UI Pro is free in development, but you need a license to use it in production.

Once purchased, you will receive an email with a license key to activate. Visit https://ui.nuxt.com/pro/activate to activate your license with your GitHub username and license key, you will be invited to the private GitHub repository.

Then, use your license key in your .env file:

NUXT_UI_PRO_LICENSE=<your-license-key>

If you have multiple projects on your machine, you can also add it to your ~/.nuxtrc:

uiPro.license=<your-token>

Edge

To use the latest updates pushed on the dev branch, you can use @nuxt/ui-pro-edge.

Update your package.json to the following:

{
  "devDependencies": {
-   "@nuxt/ui-pro": "^0.3.1"
+   "@nuxt/ui-pro": "npm:@nuxt/ui-pro-edge@latest"
  }
}

Then run pnpm install, yarn install or npm install.