Leverage VueJS components in PHP-PHP Chinese Network Q&A

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  VueJS instance mounts here. This component works perfectly here. More HTML content generated by PHP.  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 alltags asCatscomponents, 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.

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

' }); // Template coming from PHP const template = `

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

reply all (2)

P粉8839734812023-11-11 17:48:32 2 floor

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 thev-htmlattribute, 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

Like+0

Add Reply

P粉4941519412023-11-11 11:18:58 1 floor

Finally, I had to manually add the JS files to the build configuration that included the globalwindow.ExtraVuewith 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.

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.