Learn how to install Nuxt UI Pro in your application.
@nuxt/ui-pro
dependency to your project:pnpm i @nuxt/ui-pro
No need to install
@nuxt/ui
yourself as it’s already a dependency of@nuxt/ui-pro
.
@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 🚀
Nuxt UI Pro is free in development, but you need a license to use it in production.
You can choose between Solo, Startup and Organization plans, they all provide the same features and give you a license key required to build your apps. The only difference is the number of developers that can be invited to the private GitHub repository.
Purchase a license for Nuxt UI Pro.
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.
To build your app locally, you can 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>
When deploying your app on Netlify, Vercel, NuxtHub or any other hosting provider, you need to set the NUXT_UI_PRO_LICENSE
environment variable to your license key. This process is different depending on the provider but here is a quick guide for the most common ones:
The
NUXT_UI_PRO_LICENSE
variable is suggested when deploying one of our templates on NuxtHub.
This Nuxt layer is written in TypeScript and provides typings for all its components and composables.
You can first read the TypeScript section of Nuxt UI.
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>
You can customize Nuxt UI Pro by providing options in your nuxt.config
:
uiPro.license
You can set your license key directly in your nuxt.config
if you don’t want to use environment variables or ~/.nuxtrc
:
export default defineNuxtConfig({
extends: ['@nuxt/ui-pro'],
uiPro: {
license: 'your-license'
}
})
uiPro.content
Nuxt UI Pro will load some components, composables and utils related to @nuxt/content
only when the module is detected in your project. If you somehow want to import those anyway, you can set the content
option to true
:
export default defineNuxtConfig({
extends: ['@nuxt/ui-pro'],
uiPro: {
content: true
}
})
Read more about Nuxt Contentd integration in Nuxt UI Pro.
uiPro.routerOptions
Nuxt UI Pro overrides the default Nuxt scroll behavior by injecting a custom app/router.options.ts
. If you want to add your own, you will need to set the routerOptions
option to false
:
export default defineNuxtConfig({
extends: ['@nuxt/ui-pro'],
uiPro: {
routerOptions: false
}
})
A warning will appear in your console when multiple
router.options.ts
files are detected. You can remove the warning by settingrouterOptions
totrue
.
uiPro.customScrollbars
NewNuxt UI Pro overrides the default scrollbars style on Windows by injecting a scrollbars.css
CSS file. If you want to disable this behavior, you will need to set the customScrollbars
option to false
:
export default defineNuxtConfig({
extends: ['@nuxt/ui-pro'],
uiPro: {
customScrollbars: false
}
})
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
.