Load an external html using vuejs 2

Question

how can I load an external html page using Vuejs 2? This is my code in jquery

html

<div class="main" id="main" style="height: 600px; width: 1200px;">

</div>

JS

$(document).ready(function () {
    $('div.main').load('main_template.html');

});

I would like to convert this to vuejs 2 if possible, thank you in advance.

Can you not simply continue using jQuery? Vue doesn't have a built-in method like .load — Phil
– Phil, Commented Jun 20, 2017 at 5:02
@Phil I can but if there is a way to use full vue I think it will be better — Gaston Velarde
– Gaston Velarde, Commented Jun 20, 2017 at 5:19
This isn't the type of thing that Vue does. It doesn't have any built-in AJAX stuff — Phil
– Phil, Commented Jun 20, 2017 at 5:22

tony19 · Accepted Answer · 2022-07-16 00:09:44Z

2

You can do that using the v-html directive, but be aware that:

Note that the contents are inserted as plain HTML - they will not be compiled as Vue templates. If you find yourself trying to compose templates using v-html, try to rethink the solution by using components instead.

And:

Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS attacks. Only use v-html on trusted content and never on user-provided content.

If it still fit your case, you can use any http library, such as axios, to request the content, put it in a data property, and use it with v-html.

edited Jul 16, 2022 at 0:09

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 20, 2017 at 8:02

FitzFish

8,6193 gold badges33 silver badges43 bronze badges

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

Collectives™ on Stack Overflow

Load an external html using vuejs 2

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related