Müjdat KorkmazSoftware Developer

shadcn/ui has become undoubtedly one of the most popular UI libraries out there. It already has a large user base across different frameworks. On this blog post, I’ll go through a step-by-step guide on how to integrate this UI Library with your Nuxt application.

If you’re not sure, what’s difference between shadcn UI and Nuxt UI, I also wrote a blog post about the comparison between.

In order to use shadcn UI with Nuxt we need to use shadcn-vue. Luckily, setup process is really not that complicated, as this unofficial package for Nuxt is also provided as a Nuxt module.

Quick Setup

Install Nuxt module

using pnpm

pnpm add -D shadcn-nuxt

using yarn

yarn add -D shadcn-nuxt

using npm

npm install --save-dev shadcn-nuxt

Add shadcn-nuxt to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    'shadcn-nuxt'
  ],
  shadcn: {
    /**
     * Prefix for all the imported component
     */
    prefix: '',
    /**
     * Directory that the component lives in.
     * @default "./components/ui"
     */
    componentDir: './components/ui'
  }
})

And, that’s it! It’s now integrated in your application and ready to be used. Now there might be some gotchas here and there, but solutions for those possible problems are mentioned in the official docs.

ERROR: Cannot read properties of undefined (reading ‘sys’) (x4)

This is one of the common issues you might encounter integrating shadcn/ui to your Nuxt application, in that case, you simply need to install typescript to your project as a dev dependency.

npm install -D typescript

After doing that, you can continue on with the installation process as mentioned above as a Nuxt module.

PS. This is mentioned on a few places, such as GitHub and official docs: shadcn nuxt does not have any official affiliation with shadcn/ui, and the project was born out of a need to create something similar in the vue / Nuxt ecosystem.