Leverage VueJS components in PHP

Question

I want to mix basic HTML generated by Php and VueJS components without having to use VueJS all the way down to the lowest dom leaf.

The parent layout has a Vue application applied, all headers, navigation, sidebars, etc. are Vue components, and the main content on most pages is still pure HTML generated by PHP.

I want to upgrade a small part of the main content with Vue components, but I can't use them once I use HTML:

Php script generates the entire dom
<div id="app"> VueJS instance mounts here.
    <Cats>This component works perfectly here.
    <div id="main Content">More HTML content generated by PHP.
        <Cats> Cats does nothing here.

# Works fine in the upper DOM, but after rendering some basic HTML, the application will no longer populate the components below.

Php can render JS in script tags, but cannot use any imports.

Is there a way to have a Vue instance treat all tags as Cats components, no matter where on the page it is written?

What I have tried so far:

• Asynchronous components.
• Use the portal that installs the portal.
• Create another Vue instance and mount it to another ID.

Any ideas?

EDIT: I've tried things before that may have been hampered by the jumble of multiple UI modernization attempts in this behemoth I inherited. So I wouldn't rule out these possibilities for others facing this situation.

Answer 1

If you dynamically pass templates from the API or any other source into your Vue instance. There is a way to access this property via the v-html attribute, but check the comments below before using it.

Please note that content is inserted as plain HTML - they are not compiled into Vue templates.

So when you try to bind/render the component itself, it's not pure HTML. So it won't be processed by Vue's template compiler.

A possible solution is that you can get the component name and properties from the PHP API instead of the entire HTML template.

You can also achieve the same thing by using Vue compile options. Here is the demo :

Vue.component('Cats', {
  props: ['msg'],
  template: '
{{ msg }}
'
});

// Template coming from PHP
const template = `
`

var app = new Vue({
  el: '#app',
  data: {
    compiled: null
  },
  mounted() {
    setTimeout(() => {
        this.compiled = Vue.compile(template);
    })
  }
});

sssccc

  
  
  

Answer 2

Finally, I had to manually add the JS files to the build configuration that included the global window.ExtraVue with the settings function like this:

import Cats from 'files/Cats.vue';
window.ExtraVue = {
    setup: function(data) {
        new Vue({
            el: '#extra-vue',
            data: data,
            components: {
                Cats
            },
            template: ''
        })
    }

};

Then call the setting function at the end of the PHP script.

sssccc

The setup function can now create a new Vue instance for each component that needs to be independent.

Ideally, it would be great if VueJS could replace matching tags with components.