Load static HTML files in Vue
Multi tool use
Load static HTML files in Vue
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.
<iframe src="/static/product.html">
What's the correct way to do this in vue?
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
Jul 3 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
Jul 3 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
Jul 3 at 10:48
1 Answer
1
Load vue ressource addon if not done already
https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.10/vue-resource.min.js
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>
I've tried this approach, getting empty HTML <!-- --> in place of the component tag. This is my code: jsfiddle.net/eywraw8t/133660
– Nitin Labhishetty
Jul 3 at 13:07
try this jsfiddle
– Camille
Jul 4 at 8:34
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?– Nitin Labhishetty
Jul 4 at 12:08
/static/product.html
localhost:8080/static/product.html
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Have a look to this post from vue.js : Why Vue.js doesn't support templateURL
– Camille
Jul 3 at 9:36