In this detailed guide, we’ll walk through how to integrate Shadcn Vue with Nuxt.js. We’ll also provide useful insights and practical tips.
Get notified when we release new tutorials, lessons, and other expert Nuxt content.
The Vue.js ecosystem is rich with component libraries that streamline development, but finding the right tools can significantly enhance your productivity. Also, component libraries sometimes can be limiting, you usually don’t get the flexibility to customize the component behavior or styles. This is why Shadcn is a great choice.
Shadcn-Vue is an innovative tool that stands out by offering a unique approach to component integration. In this detailed guide, we’ll walk through how to integrate Shadcn-Vue with Nuxt.js, optimizing your development process with insights and practical tips to ensure you get the most out of this powerful combination.
Before diving into our guide, let’s talk about Nuxt.js. It’s is a powerful and versatile framework built on top of Vue.js, designed to make the development of universal (isomorphic) applications more straightforward. It simplifies the process of building server-side rendered (SSR) applications, static sites, and single-page applications (SPAs). Here are some key features of Nuxt.js:
nuxt.config.js
).Honestly, If I list down all the key features for Nuxt, It would take me a while. So, I recommend checking out the Nuxt.js 3 Fundamentals course on Vue School to learn the fundamentals. In addition, for a more comprehensive course, checkout Mastering Nuxt 3.
Now, let’s explore why Shadcn-Vue is an excellent choice for your Nuxt.js projects:
In fact, we chose Shadcn-Vue for our flagship course, the Vue.js Master Class 2024 Edition. This tool perfectly meets our needs, allowing us to craft stunning UIs with unlimited customization flexibility.
Ensure you have the following installed on your machine:
Time to get started with our guide, and integrate Shadcn with Nuxt.js.
Start by creating a new Nuxt project using the nuxi@latest init
command. This initializes a fresh Nuxt.js project with all the necessary boilerplate.
npx nuxi@latest init my-nuxt-app
cd my-nuxt-app
npm install
If you encounter an error related to TypeScript (ERROR: Cannot read properties of undefined (reading 'sys')
), install TypeScript as a dependency:
npm install -D typescript
By creating the project with this command, you’re leveraging the latest version of Nuxt.js, ensuring compatibility and access to the newest features and improvements.
Pro Tip: Using npx ensures you're always running the latest version of nuxi, saving you from potential versioning headaches. Consider it your magic wand for modern project setups.
TailwindCSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any opinionated styles. Checkout the Tailwind CSS Fundamentals course to learn more about TailwindCSS.
To add TailwindCSS to your Nuxt project, use the following command:
npx nuxi@latest module add @nuxtjs/tailwindcss
This command adds the TailwindCSS module to your Nuxt.js project, making it easy to integrate and use TailwindCSS in your components.
The next step is to add the Shadcn-Nuxt module, which integrates the Shadcn CLI and components into your Nuxt project.
npx nuxi@latest module add shadcn-nuxt
nuxt.config.ts
Open nuxt.config.ts
and configure the necessary modules and settings. This file is the main configuration file for your Nuxt.js project, and it’s where you can customize the behavior and features of your app.
export default defineNuxtConfig({
modules: ['@nuxtjs/tailwindcss', 'shadcn-nuxt'],
shadcn: {
prefix: '',
componentDir: './components/ui'
}
})
This configuration sets up TailwindCSS and Shadcn-Nuxt, specifying the directory for Shadcn components. The prefix
option allows you to add a prefix to all Shadcn components, which can help avoid naming conflicts.
Pro Tip: Setting a prefix can be particularly handy if you have a large project with multiple UI libraries. It keeps your component names unique and prevents those dreaded namespace collisions.
Initialize Shadcn-Vue in your project. The CLI will set up the necessary files and configurations to use Shadcn components in your Nuxt project.
npx shadcn-vue@latest init
components.json
During the CLI setup, you’ll be prompted to answer several questions to configure components.json
. Here’s a typical setup:
Would you like to use TypeScript (recommended)? yes
Which framework are you using? Nuxt
Which style would you like to use? Default
Which color would you like to use as base color? Slate
Where is your tsconfig.json or jsconfig.json file? ./tsconfig.json
Where is your global CSS file? src/index.css
Do you want to use CSS variables for colors? yes
Where is your tailwind.config.js located? tailwind.config.js
Configure the import alias for components: @/components
Configure the import alias for utils: @/lib/utils
Write configuration to components.json. Proceed? Y
These settings ensure that your components and styles are correctly configured for use in your Nuxt.js project.
With Shadcn-Vue integrated, you can now start adding and using components. For example, to add a button component:
npx shadcn-vue@latest add button
This command copies the button component into your project, allowing you to use it directly in your Vue files.
Use the component in your Vue file like so:
<template>
<div>
<Button>Click me</Button>
</div>
</template>
<script setup>
import { Button } from '@/components/ui/button'
</script>
Integrating Shadcn-Vue with Nuxt.js offers numerous benefits:
Integrating Shadcn-Vue with Nuxt.js provides a powerful combination for Vue.js developers, enhancing productivity and enabling rapid component integration. By following this guide, you can seamlessly incorporate Shadcn-Vue into your Nuxt projects, benefiting from its streamlined approach and TailwindCSS compatibility.
Remember, if you want to see Shadcn-Vue in action, checkout the Vue.js Master Class 2024 Edition course.