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

[Muhammad Mahmoud]

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.

[Doğukan Öksüz]

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'
  },
}

[Muhammad Mahmoud]

@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

[Doğukan Öksüz]

@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.

[Sadegh Barati]

@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

[Sadegh Barati]

https://twitter.com/Ignace_Maes/status/1800464315604213964?s=19

Vue docs toggle CAPI & OAPI is idea to handle this 💯

[Muhammad Mahmoud]

You're right I thought of it then saw shadcn-docs already handles componentsPath & utlisPath in in ComponentPreview component which is basically the same idea as this. What to do you think?

[Sadegh Barati]

If the ComponentPreview way is simpler, then let's go with shadcn-docs way

[Muhammad Mahmoud]

I wanted to start with cli's internal refactors first & loading components config by nuxt module but it seem they would need some time . I will give this a try asap!

[Sadegh Barati]

I wanted to start with cli's internal refactors first & loading components config by nuxt module but it seem they would need some time . I will give this a try asap!

@MuhammadM1998

I'll take care of this then, if I could

Can you share the shadcn-docs way? Thanks

[Muhammad Mahmoud]

@sadeghbarati I still need to think about it. I'll ping you when I get to something

[zernonia]

@MuhammadM1998 I think this is abit extra tho.. User can simply remove tho import right? Maybe 1 or 2 second max per component copied?

[Muhammad Mahmoud]

@zernonia less steps is always better imo 😁 It gets tedious as one component may have multiple .vue files. But it's up to you guys of course.

[Sadegh Barati]

I think this is abit extra tho..

Yeah, I'm thinking again this can cause confusion for new devs,
Let's keep it as is

@MuhammadM1998 Feel free to close the issue if you don't worked on it