[Feature]: Regarding Compatibility with Nuxt 3

[miztizm]

Describe the feature

Hello Team,

I wanted to reach out to ensure compatibility and to see if there are any specific considerations or modifications needed when integrating with Nuxt 3.

Could you please provide details on the following:

Is fully compatible with Nuxt 3 now?

Thans

Additional information

• I intend to submit a PR for this feature.
• I have already implemented and/or tested this feature.

[Saeid-Za]

Hello there !
The only thing that should be noted is how to prevent hydration errors when SSR is enabled.

In your app.vue file:

<script setup lang="ts">
import { ConfigProvider } from "radix-vue"
</script>

<template>
  <ConfigProvider :use-id="useId">
    <NuxtLayout>
	<NuxtPage />
    </NuxtLayout>
  </ConfigProvider>
</template>

And to integrate the dark-light mode, follow this guide..

If there are any questions, feel free to ask.

[brokuka]

For example in my case components.json has this structure

{
	"$schema": "https://shadcn-vue.com/schema.json",
	"style": "default",
	"typescript": true,
	"tsConfigPath": ".nuxt/tsconfig.json",
	"tailwind": {
		"config": "tailwind.config.js",
		"css": "assets/styles/index.css",
		"baseColor": "neutral",
		"cssVariables": true
	},
	"framework": "nuxt",
	"aliases": {
		"components": "~/components",
		"utils": "~/utils/common",
		"ui": "~/app/components/ui"
	}
}

Is it possible to remove/disable aliases support, since nuxt has auto imports? (utils)

[sadeghbarati]

Yes aliases can be changed to custom directory

You can put lib/utils contents inside utils directory for using Nuxt auto-import features but you need to do it manually and refactor the components yourself

---

We should consider individual CLI for each framework we support like

shadcn-vue-nuxt init / shadcn-vue-nuxt add
shadcn-vue-vite init / shadcn-vue-vite add
shadcn-vue-astro init / shadcn-vue-astro add

to add components and utils based on the best practices

[brokuka]

Yes aliases can be changed to custom directory

You can put lib/utils contents inside utils directory for using Nuxt auto-import features but you need to do it manually and refactor the components yourself

We should consider individual CLI for each framework we support like

shadcn-vue-nuxt init / shadcn-vue-nuxt add shadcn-vue-vite init / shadcn-vue-vite add shadcn-vue-astro init / shadcn-vue-astro add

to add components and utils based on the best practices

CLI for framework will be good, especially for NUXT

[MuhammadM1998]

Yes aliases can be changed to custom directory

You can put lib/utils contents inside utils directory for using Nuxt auto-import features but you need to do it manually and refactor the components yourself

We should consider individual CLI for each framework we support like

shadcn-vue-nuxt init / shadcn-vue-nuxt add shadcn-vue-vite init / shadcn-vue-vite add shadcn-vue-astro init / shadcn-vue-astro add

to add components and utils based on the best practices

@sadeghbarati I think this can be solved by #618 without the need for extra CLIs! The CLI can pick up the framework in components.json and run the corresponding command automatically (Maybe with a log like Detected framework: Vue... etc)

[MuhammadM1998]

Is it possible to remove/disable aliases support, since nuxt has auto imports? (utils)

The CLI reads those values so I don't think you can remove them. Regarding utils if you shadcn-nuxt 0.10.5 or later you can remove 'lib/utils' as it gets injected by the module

[manpreet-compro]

Hi, I want to know about the support for nuxt layers. I am planning to create a nuxt layer with shadcn components and multiple apps to extend that layer.

I am facing some issues regarding the file paths e.g. tailwind config and tailwind css. The files are referred from the application and not from the layer. If there is any example or documentation on how to use in the layers, it would be beneficial.