Vue: Allow component templates to be loaded asynchronously.

[Morgul]

Currently, components must provide their templates as javascript strings. Embedding a multiline string in Javascript is something I personally have a strong dislike for, so I would much rather have my template in it's own file. However, this would require Vue to request the template from the server, put that in some cache somewhere, and then compile the component. (This is very similar to how Angular does things.)

I'm curious how other people are dealing with this currently? To me it seems like a huge roadblock for using Vue for something large... am I missing something?

[yyx990803]

1. Retrieving multiple templates async results in many HTTP requests and is in general bad in production. The recommended approach is to use a build tool like Browserify or Webpack that gives you file modularity during development, and the ability to bundle as you like for production. See http://vuejs.org/guide/application.html
2. Vue treats components as the basic building block, so it's better to load components asynchronously rather than templates. You can achieve that with Webpack's auto bundle-splitting and Vue's async component feature: http://vuejs.org/guide/components.html#Async_Components

[Morgul]

For my needs the cost of doing 5 or 6 templates loads is almost never a consideration, and Webpack adds a significant level of complexity that I don't feel I need it. Browserify, on the other hand, I've used for some projects and would play rather nicely with Babel, so that's the direction I'm leaning.

All that aside, the Async Component support is actually really interesting! For my little test case (an Electron app), I just wrote a small component loader that loads the HTML off disk. The same approach could be used for anyone wishing to load html templates. I threw it into a gist, in case anyone was interested in it:

https://gist.github.com/Morgul/297dcab9bf486cae4bbc