Installation

Setup

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. You can choose between Solo and Team, both will give you access to the same features and give you a license key required to build your apps. The main difference is the number of developers that can be invited to the private GitHub repository.

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>

Caveat: Testing

Currently, Nuxt UI Pro cannot tell the difference between building for production and for tests. This means that you will need to add your license key to your test environment as well.

• Locally: You can add your license key to your ~/.nuxtrc to make testing work out of the box.
• For CI: You can add your license key to the CI environnement variables by using a GitHub secret or any alternative. Here is an example for GitHub Actions:

jobs:
  ci:
    env:
      NUXT_UI_PRO_LICENSE: ${{ secrets.NUXT_UI_PRO_LICENSE }}
  # The rest of your action code goes here...

TypeScript

This Nuxt layer is written in TypeScript and provides typings for all its components and composables.

Like Nuxt UI, you can import the Nuxt UI Pro types from #ui-pro/types, it can be useful when defining wrapper components:

<template>
  <UHeader :links="links" />
</template>

<script setup lang="ts">
import type { HeaderLink } from '#ui-pro/types'

defineProps<{
  links: HeaderLink[]
}>()
</script>

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.