Nuxt
Install and configure Nuxt.
Create project
Start by creating a new Nuxt project using create-nuxt-app
:
pnpm dlx nuxi@latest init my-app
If you encounter the error ERROR: Cannot read properties of undefined (reading 'sys') (x4)
, please proceed to install TypeScript as a dependency, as advised in this issue
pnpm add -D typescript
Add Tailwind and its configuration
Install @nuxtjs/tailwindcss
module:
pnpm add --save-dev @nuxtjs/tailwindcss
Add the module to the modules
section of nuxt.config.{ts,js}
:
export default defineNuxtConfig({
modules: [
'@nuxtjs/tailwindcss'
]
})
Create tailwind.config.js
with the template below:
/** @type {import('tailwindcss').Config} */
export default {
content: [],
theme: {
extend: {},
},
plugins: [],
}
Add this import header in your main css file, assets/css/tailwind.css
in our case:
@tailwind base;
@tailwind components;
@tailwind utilities;
/* ... */
Add Nuxt
module
Due to Nuxt auto-import feature, if you skip this step you will observe many warning in console.
Install the package below.
pnpm dlx nuxi@latest module add shadcn-nuxt
Configure nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxtjs/tailwindcss', 'shadcn-nuxt'],
shadcn: {
/**
* Prefix for all the imported component
*/
prefix: '',
/**
* Directory that the component lives in.
* @default "./components/ui"
*/
componentDir: './components/ui'
}
})
Run Nuxt Prepare
If you are initiating a new project, you need to run the command so that Nuxt generates the necessary .nuxt
folder:
pnpm dlx nuxi prepare
Run the CLI
Run the shadcn-vue
init command to setup your project:
pnpm dlx shadcn-vue@latest init
Configure components.json
You will be asked a few questions to configure components.json
:
Which style would you like to use? › New York
Which color would you like to use as base color? › Zinc
Do you want to use CSS variables for colors? › no / yes
That's it
You can now start adding components to your project.
pnpm dlx shadcn-vue@latest add button
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:
<template>
<div>
<Button>Click me</Button>
</div>
</template>