How to load external html file in a template in Vu

Question

I'm new to vue js. I'm just creating a simple project where I just include vuejs through CDN. not using node/npm or cli.

I keep all my html markup in single html which looks messy as it grows. I tried to split html to views and want to include it by something analogous to ng-include of angularJs

I have worked in angular previously where there is ng-include to load external html files. I'm looking for something similar to that in vue. the whole point is to split my html files into more maintainable separate files.

have come across <template src="./myfile.html"/> but it doesn't work Can somebody help me out

Answer 1

It's actually remarkably easy, but you need to keep something in mind. Behind the scenes, Vue converts your html template markup to code. That is, each element you see defined as HTML, gets converted to a javascript directive to create an element. The template is a convenience, so the single-file-component (vue file) is not something you'll be able to do without compiling with something like webpack. Instead, you'll need to use some other way of templating. Luckily there are other ways of defining templates that don't require pre-compiling and are useable in this scenario.

1 - string/template literals

example: template: '<div>{{myvar}}</div>'

2 - render function

查看更多

0人赞 添加讨论(0) 举报

Answer 2

You cant. You must use async components - read guide here

Answer 3

ng-include was really awesome for loading templates for router. An alternative is using fetch and implementing your own promise.