Indeed, there is a way to accomplish this task. Simply follow these instructions:
- Begin by registering the component (which will be sent as an ajax response) globally.
import Vue from 'vue'
import Test from './some/folder/Test.vue'
Vue.component('test', Test)
- You can either add Vue to the window object or export it for later importing wherever necessary. For simplicity, I will add it to the global window object for easy access in the browser console.
window.Vue = Vue
- Once you receive the ajax response containing the uncompiled DOM element (
<test></test>), you have the option to insert it directly into your DOM and compile it afterwards, or compile it first before mounting it to the DOM.
Assuming you inserted the component template directly into the DOM as shown in your example, pay attention to the wrapper element.
<p>dummy paragraph</p>
<div id="testapp">
<test></test>
</div>
<p>another dummy paragraph</p>
- Next, create a new Vue instance and specify where it should be mounted. Since your test component is already registered globally, Vue recognizes its structure and will compile it upon encountering it in the DOM. Alternatively, you can also include it within the "components" property here.
new window.Vue({
el: '#testapp',
})
- That's it!
Note: If you have a root vue instance already mounted, VueDevtools may not detect your newly compiled component. To address this, you need to inform the newly created instance that it belongs to a parent instance:
var vm = new Vue({
el: '#app',
});
new window.Vue({
el: '#testapp',
parent: vm,
});
Important: The new vue instance will NOT share data with other instances. This method is primarily useful when dealing with independent components, such as a text-input component designed solely for sending data to the server independently.
I trust this information proves helpful to someone in need!