re: Dynamic components using VueJS VIEW POST


How does this work when your components are in separate vue files? We don't want the component to be custom written by users but we still need to dynamically load the components (by name) via the JSON file.

So our API returns back a list of components to load (these would likely be part of the Webpack result) but that list is dynamic based on the API.


If you have a component definition, you can have a component that loads the component from the API, I would use eval to run the javascript (using the same logic as in On-the-fly components Example).

Just be careful, using eval or new Function is usually not a good approach since it will run an possible unsecure javascript and slow.


Thanks Carlos - security is definitely a concern - I don't want to be loading javascript on the fly.

I think the problem is that my components aren't being registered globally properly.

I thought by loading the components in the parent component, they would be available to the lower level components but they aren't.

So in my page component, I'm doing the import (but not using the component). Shouldn't that component be available to the child?

--- EDITED ---
I'm using Quasar as our framework and they don't use a main.js but a plug-in approach. So that's where I have to go.


I think the problem is that my components aren't being registered globally properly.

You can use Vue.component() to register globally.

Never used Quasar, if you can create a link on codesandbox with an sample on what you want to do, I can have a look and try to help.

No need - I've got it working now - I'm fairly new to vue but your examples set me on the right path.

quasar lets you build separate plug-ins.

I'll post an article when I've got it working smoothly.

Code of Conduct Report abuse