How can I load future/unknown Vue file without rebuild or redeploy of project

Hi all, hope you can help…

I need to load future unknown Vue file without rebuild or redeploy of the project.

This is the workflow…

  • Project is compiled & running somewhere
  • User adds a .vue file to a folder
  • After page refresh, sidebar is refreshed to reflect file/folder structure (runtime) making the page available to open via a link to a known component that will host the new future component.
  • Upon clicking the dynamic link, a (known) Vue component is opened and passed a parameter of the target dynamic (future/unknown) .vue
  • This future (runtime added) Dynamic Vue file would be loaded by the known Vue component and all hooks/mustache entries etc are correctly setup / bound / working and able to call to parent methods etc (there will be logic and data in the Known Vue that the yet unknown Vue will need to access)

Sorry if this all sounds cryptic, I hope you understand my requirement.

I’d greatly appreciate a heads up.

Ps, please assume I know very little about Vue & its methods and best practices (which is true) however I am comfortable with HTML/JS/nodejs etc - I’m just brand new to Frameworks and finding it very alien.

Thanks, Steve.

So either what I’m asking is difficult or uncommon or not understood?

Rather than providing a solution to the 2 main parts, perhaps someone could tell me if it’s possible?..

  1. Build a side bar menu from a directory structure?
  2. Have (as yet) undeclared .Vue components load and work like any declared Vue component? (I.e. dynamically load a view that is created / added some time after project is deployed - without compilation)?

Id appreciate (for now) a simple “yeah it’s possible” or “not possible due to xxx yyy”.

Thanks, Steve.

Hi

First question is easier. Your frontend code cannot get the structure of the filesystem on your webserver. You need to write some API on the server which can provide this. However if you have this structure as a an object it is fairly easy to build it s component showing it.

For your second question I think it is much harder to achieve this. Vue files needs to be compiled into something a webbrowser understands. See here https://vuejs.org/v2/cookbook/packaging-sfc-for-npm.html#Can’t-I-Just-Share-vue-Files-Directly

Hi, thanks for taking the time to reply.

This is the bit I’m struggling with. I am comfortable getting an array or object containing the list of files & sub directory files, so the issue it’s how to present that to a sidebar like menu of links.

Yes, I am finding that. I have an alternative method where by I load content (SVG/html) into a pre-declared Vue component div however none of the {{vars}} in the dynamically loaded content are properly animated/hooked.

Would you know how to at least achieve this workaround? To be clear, I can load the dynamic content into an existing containers div (using fetch) - once loaded, is there a way to tell Vue to perform its binding / operations on the embedded {{vars/functions()}}?

Ps you may notice I’m not up to speed on Vue terminology, please correct me where appropriate (I invite it) eg. What do Vue Devs call the parts between {{curly brackets}} - I’d normally call this mustache but I’m certain in Vue it should be called something else.

Thanks.

Hi. I’m on mobile so I can’t/don’t want to write to much but you could find an Vue example of sidevar and study it. Here is one example https://vue-menu.danielcintra.site/?ref=madewithvuejs.com

{{ }}Is called a moustache in Vue also. See https://vuejs.org/v2/guide/syntax.html#Text

PS I haven’t done any dynamic loading myself. So I have no first hand experience in it.

1 Like