Load static HTML files in Vue

Question

I'm trying to load a static HTML file (of a Jupyter notebook) inside a div in my Vue js app.

I tried doing <iframe src="/static/product.html"> but this renders the home page of the vue app inside the iframe.

What's the correct way to do this in vue?

Have a look to this post from vue.js : Why Vue.js doesn't support templateURL — Camille
– Camille, Commented Jul 3, 2018 at 9:36
And here you have a way to do what's you want : vue component. It's a bit heavy to load only a static html file, but component approach can handle a lot of other case. — Camille
– Camille, Commented Jul 3, 2018 at 9:41
@Camille It's a 15000 line long file, I tried converting it to a vue file but it makes the whole app sluggish. — Nitin Labhishetty
– Nitin Labhishetty, Commented Jul 3, 2018 at 10:40
With post provided in my first comment, you should be able to load a html file without converting to a real vue component — Camille
– Camille, Commented Jul 3, 2018 at 10:48

Camille · Accepted Answer · 2018-07-03 10:48:46Z

4

Load vue ressource addon if not done already

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.10/vue-resource.min.js"></script>

In your app, create a component who load your static raw html page

Vue.component('statichtmlpage', function (resolve, reject) {
    vue.$http.get('your_static_html_page.html', function(data, status, request){
        var parser = new DOMParser();
        var doc = parser.parseFromString(data, "text/html");
        resolve({
            template: doc
        });
    });
});

And add component tag where you like to display your page

<statichtmlpage></statichtmlpage>

answered Jul 3, 2018 at 10:48

Camille

2,5611 gold badge19 silver badges38 bronze badges

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

4 Comments

Nitin Labhishetty Over a year ago

I've tried this approach, getting empty HTML  in place of the component tag. This is my code: jsfiddle.net/eywraw8t/133660

Nitin Labhishetty Over a year ago

Thanks, I am able to get it working for URLs now. Facing a problem in loading local files. /static/product.html the path is correct but leads to an empty doc. Probably because when I hit localhost:8080/static/product.html it redirects to home. Am I understanding this correctly? Will mapping the url to the file with vue-router fix this?

wsankey Over a year ago

Did you ever get that working...a jupyter html file in a vuejs app @NitinLabhishetty

Nitin Labhishetty Over a year ago

Nope, had to use a hack around this. I created a simple node server to serve the static html files and used an iframe in the vuejs app to render them.

Collectives™ on Stack Overflow

Load static HTML files in Vue

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