how to render vuejs components in dynamically added html from jquery

Question

I have a vuejs component in a html that is returned from jquery ajax call but it doesn't render the component. so how to make vuejs render this component from jquery?

jquery code sample :

$.post(baseURL + "media", postData, function (data) {
      if(data.status == true) {
           $('#media_lib_app').html(data.view);
      }
 });

and what is returned inside the data.view is :

<test-component></test-component>

but when the data.view is added to the html div it doesn't render the component.

the actual code is too big as its an old project that was relying on jquery but this is the exact situation as explained in the post — m_elbardeny
– m_elbardeny, Commented Aug 7, 2017 at 15:00
You'll be more likely to get help if you can provide a Minimal, Complete, and Verifiable example of your issue. — thanksd
– thanksd, Commented Aug 7, 2017 at 15:05

tony19 · Accepted Answer · 2022-07-15 04:50:48Z

9

If I understand correctly you get a tag of a custom component from your AJAX call and want to build a Vue component out of it.

So let's say this is your <test-component>:

Vue.component('test-component', {
  template: "<p>I am the test component template</p>",
  methods: {
      // Component logic...
  }
});

Now somewhere in your app, you make the AJAX call:

$(document).ready(function() {
  var html = '<test-component></test-component>';
  var url = "https://jsonplaceholder.typicode.com/posts"; 
    
  $.get(url, function (data) {
    
    var res = Vue.compile(html)
    new Vue({
      render: res.render,
      staticRenderFns: res.staticRenderFns
    }).$mount('#media_lib_app')
    
  }.bind(this));
})

Your component mounting point:

<div id="media_lib_app"></div>

More about .compile:

https://v2.vuejs.org/v2/api/#Vue-compile

Note: Vue.compile() is only available in the full build.

You can find here an working example:

https://jsbin.com/motuvokeha/edit?html,js,output

Hope this can help you :)

edited Jul 15, 2022 at 4:50

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 7, 2017 at 21:02

Helder Lucas

3,3532 gold badges24 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

m_elbardeny Over a year ago

yes but the problem is that the ajax call happen in jquery code not vue code and at this time we can't change this part to vue so the question was how to do what you wrote but from jquery not vue

Helder Lucas Over a year ago

@m_elbardeny I edited the answer. As you can see now the code is made just in a jQuery block. However, to use a Vue component you need to register it first, so Vue knows what to do with it. I hope you understand that you can't just get an HTML tag and expect Vue magically figure things out :) That said inside the AJAX callback you mount and compile the already registered component. I believe there is no other way. Hope this time I got it :)

m_elbardeny Over a year ago

will this work if i'm using webpack ? i tried it and javascript throws error Vue is not defined

Helder Lucas Over a year ago

@m_elbardeny first make sure that you are using the full build of Vue, then you have to import Vue in your file import Vue from 'vue' if using ES6 or var Vue = require('vue')

Collectives™ on Stack Overflow

how to render vuejs components in dynamically added html from jquery

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related