Nuxt•2d ago

Install radix-vue module in nuxt3

Hi there👋 I'm an experiecend React developer and I'm new to Vuejs I'm trying to install radix-vue in my nuxt3 project, but I'm getting an error if I add module in nuxt.config as it is shown in radix-vue documentation. I suspect that it works only for nuxt 4, and if it's true is there any way to achieve autoimports for radix vue in nuxt 3 Here is the link to documentation where the installation process is shown https://www.radix-vue.com/overview/installation.html Appreciate your help and support

Radix Vue

Unstyled, accessible components for building high‑quality design systems and web apps in Vue

4 Replies

kapa.ai•2d ago

Hi @Taron Aleksanyan. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Short answer: Yes, you can get auto-imports for third-party packages like radix-vue in Nuxt 3 without a dedicated module by configuring Nuxt’s imports in nuxt.config. Try this in nuxt.config.ts:

export default defineNuxtConfig({
  imports: {
    presets: [
      {
        from: 'radix-vue',
        // list the exports you want auto-imported, e.g. composables/components helpers
        // Example:
        // imports: ['useForwardPropsEmits', 'PopoverRoot', 'PopoverTrigger', 'PopoverContent']
        imports: ['useForwardPropsEmits']
      }
    ]
  }
})

export default defineNuxtConfig({
  imports: {
    presets: [
      {
        from: 'radix-vue',
        // list the exports you want auto-imported, e.g. composables/components helpers
        // Example:
        // imports: ['useForwardPropsEmits', 'PopoverRoot', 'PopoverTrigger', 'PopoverContent']
        imports: ['useForwardPropsEmits']
      }
    ]
  }
})

This uses Nuxt’s “auto-import from third-party packages” feature. You can add any radix-vue exports you need to the imports array and then use them without manual imports across your app (Auto-imports: third-party packages). If you prefer explicit imports, you can always import from #imports as well (Explicit imports). If you previously tried adding a “module” entry from the radix-vue docs and it failed, that likely targets a different Nuxt version/module setup. Nuxt 3 doesn’t require a module to enable such auto-imports; configure imports directly as above. You can also partially or fully disable Nuxt’s scanning if needed and rely on explicit imports, but by default Nuxt 3 supports package-based auto-imports as shown (Auto-imports overview, Directory-based and toggles). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2d ago

<@1073266257626935387> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

gregandcin•2d ago

Assuming you installed the package, you should just be able to add the module in the modules list and run nuxt prepare to get the proper types for your project

Taron AleksanyanOP•18h ago

Hi @gregandcin, it works thanks

Gaming

Programming

Install radix-vue module in nuxt3

Did you find this page helpful?