I have an application that uses module (extension) system to widen its functionality. You can think of it as a report system, where each report type can be added later by providing some files that are copied to the server.
Now each report has a view screen and it can be different for each report type. This is both html + javascript + external javascript dependencies.
Can I design this behavior somehow with vue.js? The naive approach was to load the content as AJAX, and then bind it with v-html. I can also execute scripts inside with eval(document.getElementById('scriptId').innerHTML); as mentioned in Calling a JavaScript function returned from an Ajax response answer. But this is not enough, as each module can contain references to additional javascript files.
What I would consider the best approach:
- From AJAX server side I have a controller that returns the contents of
.vuefile bothtemplateandscriptparts. - From AJAX client side I have
$httpcall that gets the contents of the response from above, parses it as a component and adds to DOM, executing all the scripts and a proper vue.js lifecycle.
Please note that normal dynamic components for vue.js, at least as they are described in the manual, do not work - it requires you to know the list of all possible components in advance, and require all of them (you can't require dynamically)
