#External Components

14 messages · Page 1 of 1 (latest)

proven herald
#

So im trying to build a platform(nuxt 3) with a base template that can use external components ( build in and with nuxt 3) , from what i read it the documentation you can set a different folder to import component like :

 components: [
        { path: '~/node_modules/special', prefix: 'Special' },
        '~/components'
    ],

this works like it should, the only thing is that if you use refs inside the script part in those components that are loaded from somewhere else it gived a 500 error saying ref is not defined.

is there a way to get this working without importing ref from vue ? in components that are auto imported because of the path in nuxt.config ?

also this is only happening when the folder is in node_modules

chilly roost
#

The issue is auto imports isn't supported within node_modules

#

Are you the author of the base?

proven herald
#

yes i am the author of the base 🙂

#

i kinda have it working with the component as node_module installed as package, but then again it needs the import ref from vue to work so kinda ennoying that i just want to have like vue/nuxt components lying around to use in multiple platforms but only want to touch it once ( as how you do it with making NPM packages )

#

as example i have

project A. --------  project B
  |                       |
------- base components ------
these components can be used in multiple projects
proven herald
#

kinda found out that if you make a folder with only vue files inside node_modules

and add import { ref, refreshNuxtData } from '#imports'
in the top of the script setup

#

you can load the vue files from a folder in node-modules

#

without publishing / building

chilly roost
#

Yes you would usually ship components using the mkdist provider with unbuild

#

And importing from #imports is the way to go 👍

vapid epoch
proven herald
#

Ahh yeah ! thats exactly what im looking for

#

thanks @vapid epoch and @chilly roost