Append some Vue js component dynamically to the Dom using Jquery

In this article i will show you how to add vue js component to the Dom using jquery. First you should create your component in my exemple i had created one who only contain some text : var second = { template: ` <div class="seconddiv"> <span>Component B: {{txt}}</span> </div> `, data: function() { return { txt: 'test', };

In this article i will show you how to add vue js component to the Dom using jquery. First you should create your component in my exemple i had created one who only contain some text :
var second = {
template: `
<div class="seconddiv">
<span>Component B: {{txt}}</span>
</div>
`,
data: function() {
return {
txt: 'test',
};
},
// méthode appelée à l'initialisation du composant
mounted() {
},
// méthodes générales du composant
methods: {
}
};
Vue.component("second-comp", second);
export default second;
and know what we need is call our component mount it and finally import it in the Dom
import second from "./js/component-2.js";
$('.create-b').on('click', function() {
var myexample = Vue.extend(second);
var component = new myexample().$mount()
$('#proexemplelist').append(component.$el)
});
if you need to pass to your component some props here is another example
var component = new myexample({
propsData: {
values: valllll
}
}).$mount()
hope that it was helpful. thank you

Tags :