Introduction

In this article, we will talk about a powerful and flexible UI component library designed specifically for Nuxt applications. This guide will walk you through the process of integrating NuxtUI into your Nuxt 3 project, leveraging the power of Vue 3's Composition API to create stunning, responsive, and highly customizable user interfaces.

What is NuxtUI?

NuxtUI is a comprehensive UI component library tailored for Nuxt applications. It offers a wide array of pre-built, customizable components that adhere to modern design principles and accessibility standards. By using NuxtUI, developers can significantly reduce development time and ensure consistency across their applications.

Key Features of NuxtUI:

1. Nuxt 3 Optimized: Built from the ground up for seamless integration with Nuxt 3.
2. Effortless Styling and Functionality: NuxtUI is built with Tailwind CSS and Headless UI to help you build beautiful and accessible user interfaces. Check out this article to read more about integrating Headless UI and TailwindCSS with Nuxt apps.
3. Composition API Ready: Fully compatible with Vue 3's Composition API for enhanced code organization and reusability.
4. Customizable Theming: Robust theming system allowing for easy customization and dynamic theme switching.
5. Responsive Design: All components are designed to work flawlessly across various screen sizes.
6. Accessibility: Built with a11y in mind, ensuring your applications are usable by everyone.

Setting Up Your Nuxt 3 Project

Before we dive into NuxtUI, let's ensure we have a Nuxt 3 project ready to go. If you haven't already set up a Nuxt 3 project, follow these steps:

1. Open your terminal, and run the following command:

npx nuxi@latest init my-nuxtui-project

This will install a new Nuxt app and install the needed dependencies.

1. Open the app in VS Code

cd my-nuxtui-project
code .

Installing NuxtUI

Now that we have our Nuxt 3 project set up, let's add NuxtUI to the mix:

npx nuxi@latest module add ui

This simple command tells Nuxt to use the NuxtUI module.If you open nuxt.config.ts file, you should see the @nuxt/ui module added to the modules property, making all its components available throughout your application.

Your First NuxtUI Component

Let's start by using a simple NuxtUI component to get a feel for how it works. We'll use the UButton component as an example. Inside the app.vue file, add the following content:

<script setup lang="ts">
const handleClick = () => {
  console.log("Button clicked!");
};
</script>

<template>
  <div class="p-2">
    <h1>Welcome to My NuxtUI Project</h1>
    <UButton @click="handleClick">Click me!</UButton>
  </div>
</template>

In this example, we're using the UButton component from NuxtUI. Notice how we didn't need to import it explicitly - that's the beauty of using NuxtUI with Nuxt 3!

That’s not all, because I’m using dark mode on my local machine, it automatically applied the dark theme as you see in the above screenshot.

Customizing NuxtUI Components

One of the strengths of NuxtUI is its customizability. Let's explore how we can customize our button:

<script setup lang="ts">
const handleClick = () => {
  console.log('Liked!')
}
</script>

<template>
  <div class="p-2">
    <UButton
      color="primary"
      variant="soft"
      size="lg"
      icon="i-heroicons-heart"
      @click="handleClick"
    >
      Like
    </UButton>
  </div>
</template>

In this example, we've customized the button's color, variant, size, and even added an icon.

NuxtUI uses a consistent prop system across its components, making it easy to customize any component in a similar manner.

Theming with NuxtUI

NuxtUI comes with a powerful theming system that allows you to customize the look and feel of your entire application. Let's look at how we can modify the default theme:

1. Create a new file called app.config.ts in your project root (if it doesn't exist already).
2. Add the following code:

export default defineAppConfig({
  ui: {
    primary: 'pink'
  }
})

This configuration changes the primary color to “pink”:

Now, the button color became “pink” since we set “color” prop value to “pink”. There are many more theme options in the docs, feel free to explore them.

Using the Composition API with NuxtUI

The Composition API allows for better organization of component logic. Here's an example of how you might use it with NuxtUI to create a dynamic theme switcher:

<script setup lang="ts">
const colorMode = useColorMode()
const isDark = computed({
  get () {
    return colorMode.value === 'dark'
  },
  set () {
    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
  }
})
</script>

<template>
  <ClientOnly>
    <UButton
      :icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
      color="gray"
      variant="ghost"
      aria-label="Theme"
      @click="isDark = !isDark"
    />
    <template #fallback>
      <div class="w-8 h-8" />
    </template>
  </ClientOnly>
</template>

This example uses the useColorMode composable from @nuxtjs/color-mode ****to manage the color mode.

Conclusion

NuxtUI provides a powerful set of tools for building beautiful, responsive, and accessible user interfaces in Nuxt 3 applications. By leveraging the Composition API and NuxtUI's extensive customization options, you can create complex UI components with ease.

Remember to always refer to the official NuxtUI documentation for the most up-to-date information and advanced usage examples. Happy coding!