Closed rromanv closed 1 week ago
SmokeyStack
commented
1 month ago What I found interesting was, when running npx nuxi@latest module add shadcn-nuxt, checking the package.json shows it is installing v0.10.4. Instead of v0.11.0 which is the latest as of writing. Running npx shadcn-vue@0.10.4 init will setup the project perfectly fine, however running npx shadcn-vue@latest init causes this error.
rromanv
commented
1 month ago @SmokeyStack, you are right, shadcn-vue is on 0.11.0, but shadcn-nuxt is 0.10.4, at least on npm registry. even when 0.11.0 is already out here on github, I notice on Readme that even it has the nuxt color mode module installed too
rromanv
commented
1 month ago Now the issue that I have is this one
❯ pnpm run dev
> nuxt-app@ dev /home/rromanve/projects/my-app
> nuxt dev
Nuxt 3.13.2 with Nitro 2.9.7 5:15:19 PM
5:15:19 PM
➜ Local: http://localhost:3000/
➜ Network: use --host to expose
ℹ Using Tailwind CSS from ~/assets/css/tailwind.css nuxt:tailwindcss 5:15:20 PM
➜ DevTools: press Shift + Alt + D in the browser (v1.6.0) 5:15:20 PM
ℹ Tailwind Viewer: http://localhost:3000/_tailwind/ nuxt:tailwindcss 5:15:20 PM
✔ Vite client built in 25ms 5:15:21 PM
✔ Vite server built in 401ms 5:15:21 PM
ERROR Pre-transform error: [@vue/compiler-sfc] Failed to resolve extends base type. 5:15:21 PM
If this previously worked in 3.2, you can instruct the compiler to ignore this extend by adding /* @vue-ignore */ before it, for example:
interface Props extends /* @vue-ignore */ Base {}
Note: both in 3.2 or with the ignore, the properties in the base type are treated as fallthrough attrs at runtime.
/home/rromanve/projects/my-app/components/ui/button/Button.vue
5 | import { type ButtonVariants, buttonVariants } from '.'
6 |
7 | interface Props extends PrimitiveProps {
| ^^^^^^^^^^^^^^
8 | variant?: ButtonVariants['variant']
9 | size?: ButtonVariants['size']
✔ Nuxt Nitro server built in 435 ms nitro 5:15:22 PM
ℹ Vite client warmed up in 0ms 5:15:22 PM
ℹ Vite server warmed up in 385ms 5:15:22 PMNevermind, that Primitive error is because typescript, I needed to add it as dev dependency too
kentntwari
commented
1 month ago This issue is annoying really. please help!!
k206i
commented
1 month ago This issue is annoying really. please help!!
I was helped by installing TypeScript into the project npm install -D typescript
Don't forget to install radix npm add radix-vue and add to your tailwind.config.js modules: ['radix-vue/nuxt']. It's not done by default either.
jcottam
commented
2 weeks ago I fixed my integration by adding the following dependencies to my Nuxt 3 project:
orenmizr
commented
2 weeks ago i can verify that issue happened to me as well at fresh install. had to install tailwindcss-animate to fix it :/ and tailwind-merge.... and then CVA... probably everything shadcn-vue was suppose to do... got it to work but this is not a good thing to explicitly declare all in the root.
sagastume
commented
2 weeks ago In my case I solved it by manually adding the following packages (yarn add ...):
and as a dependency of dev
Make sure that the tailwind.config file.
//tailwind.config.js
const animate = require("tailwindcss-animate")
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ["class"],
safelist: ["dark"],
prefix: "",
modules: ['radix-vue/nuxt'],
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
},
borderRadius: {
xl: "calc(var(--radius) + 4px)",
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
keyframes: {
"accordion-down": {
from: { height: 0 },
to: { height: "var(--radix-accordion-content-height)" },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: 0 },
},
"collapsible-down": {
from: { height: 0 },
to: { height: 'var(--radix-collapsible-content-height)' },
},
"collapsible-up": {
from: { height: 'var(--radix-collapsible-content-height)' },
to: { height: 0 },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
"collapsible-down": "collapsible-down 0.2s ease-in-out",
"collapsible-up": "collapsible-up 0.2s ease-in-out",
},
},
},
plugins: [animate],
}//components.json
{
"$schema": "https://shadcn-vue.com/schema.json",
"style": "new-york",
"typescript": true,
"tsConfigPath": "./.nuxt/tsconfig.json",
"tailwind": {
"config": "./.nuxt/tailwind.config.cjs",
"css": "assets/css/tailwind.css",
"baseColor": "slate",
"cssVariables": true,
"prefix": ""
},
"framework": "nuxt",
"aliases": {
"components": "@/components",
"utils": "@/lib/utils"
}
}
ponpondev
commented
2 weeks ago For anyone coming here facing this issue, run these
yarn add class-variance-authority clsx radix-vue tailwind-merge tailwindcss-animateyarn add -D typescriptand will fix things up
Reproduction
https://stackblitz.com/edit/nuxt-shadcn-errors
Describe the bug
I have been creating new nuxt projects and installing the shadcn-nuxt module right away, using docs steps, of course, and after adding a component and training to the project, I started getting issues that some dependencies were not installed; the first complaint is a tailwind-animate, then all the ones for clx, etc
System Info
Contributes