Nuxt UI Pro

Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app.

It includes ready to use templates: Dashboard, SaaS, Docs and Landing.

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 our minimal starter, one of our official templates or follow the Installation guide to install Nuxt UI Pro in your existing project.

You can use the Use this template button on GitHub to create a new repository or use the CLI:

npx nuxi init -t github:nuxt-ui-pro/dashboard my-dashboard

Components

Nuxt UI Pro is a collection of 50+ components that can be used in various ways. This section will help you understand how the components are organized and where to use them. Feel free to dive into each component's documentation for examples and API documentation.

It does not inject any pages or layouts, you have to create them yourself. This provides more flexibility and allows you to build your app the way you want.

Layout

Let's start with the layout components, they are used to create the structure of your app with a Header, Main and Footer. Most of the time, you will use those in your app.vue:

<template>
  <UHeader />

  <UMain>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </UMain>

  <UFooter />
</template>

Landing

When building a landing page or any marketing page, you will most likely need a LandingHero and some LandingSection to define the structure.

The ULandingSection component is enough in most cases with a title, a description, some links and features and an image in the default slot for example with its align prop set to left, center or right.

But sometimes, you might want to add some LandingLogos, a LandingGrid with some LandingCard, some LandingTestimonial, a LandingCTA or even a LandingFAQ:

<template>
  <ULandingHero>
    <ULandingLogos />
  </ULandingHero>

  <ULandingSection>
    <ULandingGrid>
      <ULandingCard />
      <ULandingCard />
      <ULandingCard />
    </LandingGrid>
  </LandingSection>

  <ULandingSection>
    <UPageColumns>
      <ULandingTestimonial />
      <ULandingTestimonial />
      <ULandingTestimonial />
    </UPageColumns>
  </LandingSection>

  <ULandingSection>
    <ULandingCTA />
  </LandingSection>

  <ULandingSection>
    <ULandingFAQ />
  </LandingSection>
</template>

Pricing

When building pricing pages, you will most likely need some PricingCard inside a PricingGrid to display your plans and maybe a PricingToggle to switch between monthly and yearly plans:

<template>
  <ULandingHero>
    <template #links>
      <UPricingToggle />
    </template>
  </ULandingHero>

  <ULandingSection>
    <UPricingGrid>
      <UPricingCard />
      <UPricingCard />
      <UPricingCard />
    </UPricingGrid>
  </ULandingSection>

  <ULandingSection>
    <ULandingLogos />
  </ULandingSection>

  <ULandingSection>
    <ULandingFAQ />
  </ULandingSection>
</template>

Blog

When building a blog, you will most likely need a BlogList and some BlogPost to display your articles:

<template>
  <UContainer>
    <UPageHeader />

    <UPageBody>
      <UBlogList>
        <UBlogPost />
        <UBlogPost />
        <UBlogPost />
        <UBlogPost />
        <UBlogPost />
      </UBlogList>
    </UPageBody>
  </UContainer>
</template>

Page

This category contains components to build the structure of your pages. For example, the Page component will create a grid of 10 columns with a 2 columns left and/or right slots. You will also find a PageHero, a PageHeader and a PageBody with prose support.

<template>
  <UPageHero />

  <UPage>
    <UPageHeader />

    <UPageBody prose>
      <ContentRenderer />
    </UPageBody>
  </UPage>
</template>

You might also want to add a PageGrid or a PageColumns with some PageCard or add some PageLinks to display a list of links next to your content.

And if you need to display an error page, you can use the PageError component:

<template>
  <UHeader />

  <UMain>
    <UPage>
      <UPageError :error="error" />
    </UPage>
  </UMain>

  <UFooter />
</template>

Aside

When you need to display a sticky sidebar, you can use the Aside component inside the left or right slot of the Page component:

<template>
  <UPage>
    <template #left>
      <UAside />
    </template>

    <slot />
  </UPage>
</template>

Navigation

When you need to display a list of links in a sidebar, you can use the NavigationTree component inside the default slot of the Aside component:

<template>
  <UPage>
    <template #left>
      <UAside>
        <UNavigationTree :links="links" />
      </UAside>
    </template>

    <NuxtPage />
  </UPage>
</template>

Auth

The only component in this category is the AuthForm, you can use it to build your login, register, forgot password and reset password pages.

Dashboard

This category contains 15+ components to build your own dashboard, designed specifically to create a consistent look and feel.

Wrap your layout with the DashboardLayout component and your pages with the DashboardPage component. Use the DashboardPanel component to create a multi-column layout with some DashboardNavbar, DashboardToolbar, DashboardSidebar inside, the responsive will be handled automatically.

<template>
  <UDashboardLayout>
    <UDashboardPanel :width="250" :resizable="{ min: 200, max: 300 }" collapsible>
      <UDashboardNavbar />

      <UDashboardSidebar>
        <template #header>
          <UDashboardSearchButton />
        </template>

        <UDashboardSidebarLinks />
      </UDashboardSidebar>
    </UDashboardPanel>

    <slot />

    <UDashboardSearch />
  </UDashboardLayout>
</template>

Content

As mentioned in the Content guide, if you choose to go with @nuxt/content to build your app, @nuxt/ui-pro will provide you with a set of fully-compatible components like the ContentSearch, ContentToc and ContentSurround components.

You'll also find some Prose components to use in your .md files using the MDC syntax like the Callout, Card, CodeGroup, Tabs, etc. You can find the full list in the Prose category.

Color Mode

The color mode category contains components to switch between light and dark mode in different ways such as ColorModeButton, ColorModeToggle and ColorModeSelect.

Those components will be automatically hidden if you've forced the color mode in your page with:

<script setup lang="ts">
definePageMeta({
  colorMode: 'dark'
})
</script>

There are also components to easily display an avatar or image with a different src for light and dark mode such as ColorModeAvatar and ColorModeImage.