The Building Blocks for
Modern Web Apps
Nuxt UI Pro is a collection of premium components built on top of Nuxt UI to create beautiful & responsive Nuxt applications in minutes.
It includes all primitives to build landing pages, documentation, blogs, changelog, dashboards or entire SaaS products.
The freedom to build anything
Nuxt UI Pro ships with an extensive set of advanced components that cover a wide range of use-cases. Carefully crafted to reduce boilerplate code without sacrificing flexibility.
- Fully customizable
- Like Nuxt UI, change the style of any component from your App Config or customize them specifically through the ui prop.
- Slots for everything
- Each component leverages the power of Vue's slots to give you the flexibility to build anything.
- Responsive by design
- Nuxt UI Pro components aims to structure your content, they are responsive by design and will adapt to any screen size.
app.vue<script setup lang="ts"> const links = [ { to: '/', label: 'Home' }, { to: '/about', label: 'About' }, { to: '/contact', label: 'Contact' } ] </script> <template> <UHeader :links="links" /> <UMain> <ULandingHero title="Hello World" /> <ULandingSection title="Features"> <UPageGrid> <ULandingCard title="First Card" /> <ULandingCard title="Second Card" /> <ULandingCard title="Third Card" /> </UPageGrid> </ULandingSection> </UMain> <UFooter /> </template>
The flexibility to control your data
Although you can use any data source you want, Nuxt UI Pro is fully integrated with Nuxt Content and provides additional features when the module is detected.
- Write Markdown with ease
- Nuxt UI Pro overrides Nuxt Content prose components to make them awesome but also adds new ones like Callout, CodeGroup, Field, etc.
- Beautiful Typography styles
- Tailwind CSS typography plugin is pre-configured and styled to match Nuxt UI components and colors.
- Full-Text Search out of the box
- Nuxt UI Pro ships with a ready to use command palette component. No need to setup Algolia DocSearch anymore.
pages/[...slug].vue<script setup lang="ts"> const route = useRoute() const { data: page } = await useAsyncData(route.path, () => queryContent(route.path).findOne()) </script> <template> <UPage> <UPageHeader :title="page.title" :description="page.description" :links="page.links" /> <UPageBody prose> <ContentRenderer v-if="page.body" :value="page" /> </UPageBody> <template #right> <UDocsToc :links="page.body.toc.links" /> </template> </UPage> </template>
Build your docs in seconds
Whether you are building docs for your open source project or to explain your product, Nuxt UI Pro got you covered.
Getting Started
Installation
Learn how to install and configure the module in your Nuxt app.
Community
Get started with templates
Use our templates or put the pieces together to build a complete application with a landing page,
documentation, blog, changelog, pricing page, dashboard, etc.
Landing
Coming soon
Docs
Coming soon
Blog
Coming soon
Pricing
Coming soon
Changelog
Coming soon
Dashboard
Coming soon
Buy once, use forever
Nuxt UI Pro is a one time purchase, you will get all the updates and support forever.
Free
Get started for free in development.
-
- Access all components
- Unlimited updates
- Upgrade when ready to deploy
Solo
For bootstrappers and indie hackers.
$199
- One developer
- Unlimited projects
- Access to the GitHub repository
- Unlimited minor & patch updates
- Lifetime access
Team
Unlimited license for growing teams.
$699
- Up to 20 developers
- Unlimited projects
- Everything in Pro
- Prioritized feature requests
- Unlimited minor & patch updates
- Lifetime access
Frequently Asked Questions
If you can't find what you're looking for, email our support team and if you're lucky someone will get back to you.
We have much better than a free trial, you can use Nuxt UI Pro for free in development mode. Once you are ready to deploy your application, you can purchase a license.