Feature(Docs): Add a SelectMenu for user's framework

[MuhammadM1998]

Describe the feature

Adding a SelectMenu with the frameworks as options (Vue, Nuxt, Astro, ...) and adjusting the components code accordingly would simplify copying the code a lot. It can be added besides 'Components Path' and 'Utils Path' in the current code config side menu

Example for the Button component:

• User selects 'Vue'. Will render the existing code

<script setup lang="ts">
import { Button } from '@/components/ui/button'
</script>

<template>
  <Button>Button</Button>
</template>

• User selected 'Nuxt'. Will remove the import as the component is auto imported

<template>
  <UiButton>Button</UiButton>
</template>

Maybe it's a nitpick because ultimately we have only two options. Vue in Vue, Laravel, Astro projects and Nuxt. But I created an issue as I might try to implement it If I had the time 😁

Additional information

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

[dogukanoksuz]

In NuxtJs we can already import without writing Ui in front of components.

Are you sure you imported shadcn-nuxt plugin on nuxt.config.ts file?

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

[MuhammadM1998]

@dogukanoksuz I know about the prefix thanks but it's just an example about how the import can be removed in Nuxt not the component name

[dogukanoksuz]

@dogukanoksuz I know about the prefix thanks but it's just an example about how the import can be removed in Nuxt not the component name

You dont need to copy imports when you install plugin. Just copy component code and it works.

[sadeghbarati]

@dogukanoksuz, let me clarify what @MuhammadM1998's goal is.

The current documentation uses imports in markdown, as shown in the image:

As the title suggests, it's a feature for users to select their framework of choice. For instance, if a user selects Nuxt, those imports should be removed from the markdown code