We're live-coding on Twitch! Join us!
Append Vue js component dynamically into the Dom using Jquery

Append Vue js component dynamically into the Dom using Jquery

Hello scotch community in this small article i will show you how to add vue js component into the Dom using jquery.

First you should create your component in my exemple i had created one who only contain some text :

var tutocomponent = {
    template: `<div>
            <span>{{txt}}</span>
        </div>`,
    data: function() {
        return {
            txt: 'some text',
        };
    },
    // méthode appelée à l'initialisation du composant
    mounted() {
    },
    // méthodes générales du composant
    methods: {
    }
};

Vue.component("second-comp", second);

and now we need to call our component, mount it and finally import it into the Dom.

import tutocomp from "./js/tutocomponent.js";
    $('.create-tutocomponent').on('click', function() {
    var vuecomp = Vue.extend(tutocomp);
    var component = new vuecomp().$mount()
    $('#container').append(component.$el)
});

if you need to pass your component some props here is another example

var component = new vuecomp({
    propsData: {
        values: valllll
    }
}).$mount()

hope that it was helpful. thank you. litle share will be enough

Like this article? Follow @ezkeromar on Twitter