Component Options

Components accept all the same options that we can use when defining a root component. There’s one important difference, though. A component that’s not used as the application’s root is not mounted directly into the DOM. So we need to provide either a template option or a render() function.

In-DOM template

The template property can be either a DOM selector or markup. If the string starts with a # , Vue will treat it as a selector and look for a matching element in the DOM. If it finds one, it’ll use its contents as the template.

Here’s an in-DOM template:

Otherwise, the template string is parsed as markup, here as a template string:

In-DOM templates can be useful in situations where we’re adding Vue to an existing site without a build system (and therefore, we can’t use SFCsSFC stands for single-file component. In Vue, SFCs are a modular way of organizing and encapsulating the structure, behavior, and style of a Vue component within a single file.), and where the template markup might be dynamically rendered on the server side.

If we’re using SFCs, we can provide our markup within the <template> </template> tags in our .vue component file, as in this HelloWorld.vue file: