Append some Vue js component dynamically to the Dom using Jquery

Add Vue component to Dom with 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>
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()

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

var component = new myexample({
propsData: {
values: valllll

hope that it was helpful.
thank you

★ READ ALSO ★  Create a Mock REST API in Seconds for Prototyping your Frontend

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.