Vue Templates
We refer to the HTML portion of our Vue application as a template in Vue.
Later on, we’ll use the <template> element in *.vue files to better organize our code.
The HTML code can be placed inside the template configuration option in the Vue instance.
The Vue Template
Let us examine an example in which the configuration option ‘template’ is used. In this straightforward example, the HTML portion has been relocated to the “template” configuration option:
Example
The HTML content included in backtick quotes ‘…’ is transferred to the configuration option ‘template’ from within the <div id=”app”>. A back tick quotation allows for the writing of numerous lines of HTML.
<div id="app"></div>
<script data-minify="1" src="https://codingask.com/wp-content/cache/min/1/vue@3/dist/vue.global.js?ver=1730183021" defer></script>
<script>
const app = Vue.createApp({
template:
`<h1>{{ message }}</h1>
<p>This is a second line of HTML code, inside back tick quotes</p>`,
data() {
return {
message: "Hello World!"
}
}
})
app.mount('#app')
</script>
Single File Components (SFCs)
Although the HTML portion of our Vue application can also be gathered inside the Vue instance, as seen in the code sample above, this does not make it any simpler to obtain an overview of the HTML file.
We will now write our Vue code in SFCs, or *.vue files, in order to improve the development environment, obtain a better overview, and make managing larger projects easier.
All *.vue files are made up of just three components:
- <template>, the location of the HTML text.
- For our Vue code, use <script>.
- The CSS styling is written in <style>.
However, we must configure our computer differently before using *.vue files in our project. This will be explained in the tutorial’s upcoming pages.
