Wrap an existing PHP / html app ?

[diogomend]

Would it be possible to use vue3-sfc-loader to completly wrap an existing HTML page and automatically add every component inside a folder (i.e. having /components/*.vue)?
So without much effort we could add
<my-component></my-component>
anywhere on the page and our component would show up
Thanks

[FranckFreiburger]

Hi diogomend,

I think it is possible to use PHP to get the public path of all components in /components/*.vue
then register all these components ( app.component('component', await loadModule(componentPath)) )

[diogomend]

and those will be available anywhere ? Or do we need to have an empty div to initialise the vue instance ? Can't figure that piece out. thanks

[diogomend]

for instance, i have an existing div

<div id="app">
   ..
   <nav-bar></nav-bar>
</div>
    //after scripts 
    const app = Vue.createApp({});
    app.component('nav-bar', await loadModule('../components/NavBar.vue'));

    app.mount('#app');

But nothing happens. my component is not showing up

[FranckFreiburger]

It may look like this:

<script>

const components = JSON.parse(<?php

  ... json_encode( glob( ... ) ) ...     // should look like this: { "nav-bar": "../components/NavBar.vue", ...

?>);

for ( let [name, path] of Object.entries(components) ) {

  app.component(name, Vue.defineAsyncComponent( () => loadModule(path, options) ));
}

</script>