This method is really only used in code examples or quick prototypes, though, as it's very difficult to work with anything beyond the simplest template.
- Needs polyfill or transpile?
- Needs runtime template compiler?
- If you use a template option that does not use HTML markup at runtime you can use a special build of Vue.js that does not include this module (and is, therefore, smaller and faster).
- As of ES2015, a special kind of string called a template literal can be declared using backticks.
- Unlike regular strings, these allow embedded expressions and can be multi-line.
- The multi-line feature makes these much more useful for defining component templates compared to regular strings, as they make markup more readable.
Needs polyfill or transpile?
Needs runtime template compiler? Older browsers may not support this ES2015 feature, so though you should probably transpile your code to be safe.
With this method, your template is defined inside a script tag in the index.html file.
The script tag is given the type text/x-template and referenced by id in your component definition. On the plus side, this method allows you to write your template markup in an HTML file.
The downside is that it separates the template from the rest of the component definition so it can be a little hard to reason about. Needs polyfill or transpile? Needs runtime template compiler? With this method, you define the component's template within the parent template when it gets used.
Just be sure to add the attribute inline-template so Vue knows where to find it. The method has roughly the same upsides and downsides as x-templates.
One interesting difference is that, since the template can be defined in the document body, the content could be crawled for SEO. Needs polyfill or transpile? Needs runtime template compiler?
You'll need to read the Vue docs for the exact syntax, but the rough idea is that you define template nodes by calling createElement(tag, options, childElements).
However, render functions are far more verbose and abstract than other template options and I don't expect many people would be comfortable writing a whole application like this.
DOM Template Parsing Caveats
Popularized by React, this is the most controversial template option in Vue, as some developers see it as ugly, unintuitive and as a betrayal to the Vue ethos.
However, JSX can be used to write a Vue render function in a far more readable and less abstract way. It does require you to transpile, though, as JSX is not readable by browsers. Needs polyfill or transpile?
Needs runtime template compiler? One of the most popular features of Vue.js is the Single-File Component (SFC).
These allow you to write markup while keeping your component defintion in one file. They're compiled by vue-loader into render functions so you get the best runtime performance, too.
To create a SFC you first create a .vue file, e.g. Checkbox.vue, then define your template in a template tag and define the component in a script tag. This file then gets imported into your main Vue app.
So long as you are comfortable using Vue CLI or setting up your own build tool in your project, SFCs are the way to go.
Needs polyfill or transpile? Needs runtime template compiler? If you want a TLDR; version of this article here it is: use single-file components as they're the most versatile and powerful option in almost every scenario.
That said, each of the above will have an edge in a certain scenario and should be judged on the use case you have.
The docs even recommend avoiding some of them.