ProGuide
Setup
Learn how to install Nuxt UI Pro in your Nuxt application.
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
- Add
@nuxt/ui-pro
dependency to your project:
pnpm i @nuxt/ui-pro
@nuxt/ui
yourself as it's already a dependency of @nuxt/ui-pro
.- Extend
@nuxt/ui-pro
layer and register@nuxt/ui
module in yournuxt.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
.