Nuxt

Create project

Start by creating a new Nuxt project using create-nuxt-app:

pnpmnpmyarnbun
pnpm create nuxt@latest
Copy

pnpmnpmyarnbun
pnpm add -D typescript
Copy

Add Tailwind CSS

How to setup tailwindcss

pnpmnpmyarnbun
pnpm add tailwindcss @tailwindcss/vite -D
Copy

Copy@import "tailwindcss";

Copyimport tailwindcss from '@tailwindcss/vite'

export default defineNuxtConfig({
  // ...
  css: ['~/assets/css/tailwind.css'],
  vite: {
    plugins: [
      tailwindcss(),
    ],
  },
})

Add Nuxt module

Skipping this step triggers numerous console warnings due to Nuxt's auto-import feature.

pnpmnpmyarnbun
pnpm dlx nuxi@latest module add shadcn-nuxt
Copy

Configure nuxt.config.ts

Copyexport default defineNuxtConfig({
  // ...
  modules: ['shadcn-nuxt'],
  shadcn: {
    /**
     * Prefix for all the imported component.
     * @default "Ui"
     */
    prefix: '',
    /**
     * Directory that the component lives in.
     * Will respect the Nuxt aliases.
     * @link https://nuxt.com/docs/api/nuxt-config#alias
     * @default "@/components/ui"
     */
    componentDir: '@/components/ui'
  }
})

Add a Nuxt Plugin for providing ssrWidth (optional)

Some components require a ssrWidth to be set through VueUse to avoid Hydration errors on mobile.

Add the following plugin to your Nuxt application: app/plugins/ssr-width.ts

Read more about useSSRWidth

Copyimport { provideSSRWidth } from '@vueuse/core'

export default defineNuxtPlugin((nuxtApp) => {
  provideSSRWidth(1024, nuxtApp.vueApp)
})

Run Nuxt Prepare

If you are initiating a new project, you need to run the command so that Nuxt generates the necessary .nuxt folder:

pnpmnpmyarnbun
pnpm dlx nuxi prepare
Copy

Run the CLI

Run the shadcn-vue init command to setup your project:

pnpmnpmyarnbun
pnpm dlx shadcn-vue@latest init
Copy

You will be asked a few questions to configure components.json.

CopyWhich color would you like to use as base color? › Neutral

Add Components

You can now start adding components to your project.

pnpmnpmyarnbun
pnpm dlx shadcn-vue@latest add button
Copy

The command above will add the Button component to your project. Nuxt autoImport will handle importing the components, you can just use it as such:

Copy<template>
  <div>
    <Button>Click me</Button>
  </div>
</template>