Single File Components allow us to define the HTML/CSS and JS of a component all within a single .vue file.
A single-file component is composed of three parts:
- The
<template>section which contains the component’s markup in plain HTML. - The
<script>section which contains all the JS logic within that component. - The
<style>section which contains all the component styles.
Here’s an example of a single-file component given the name of HelloWorld:
<template>
<div class="hello-world">
<h2>{{ getGreeting }}</h2>
<p>This is the Hello World component.</p>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
reversedGreeting: '!dlrow olleH'
}
},
computed: {
getGreeting() {
return this.reversedGreeting
.split("")
.reverse()
.join("");
}
}
}
</script>
<style scoped>
.hello-world {
width: 100%;
text-align: center;
}
</style>
- The
<template>of theHelloWorldcomponent displays the value of thegetGreetingcomputed property declared in the<script>section as well some static text. - The
getGreetingcomputed property simply reverses thereversedGreetingdata property to return “Hello World!”. - The
<style>section of the component has thescopedattribute which dictates the styles declared in the component will be applied to this and only this component.
Though the structure of a single-file component may look different, everything we’ve discussed thus far with regards to instance/component properties remains the same. We’re able to use all the properties a Vue instance component contains like data, methods, computed properties, lifecycle hooks, etc.
The main advantage to using single-file components is how we’re able to neatly define the markup, logic, and styles of a component all within a single file. By building our application in a module-based setting (e.g. with Webpack), we’re also able to take advantage of modules to break our application (and components!) to smaller discrete pieces.
Defining and Using Single-File Components
We can use single-file components easily with the Vue CLI. To do this, we just create a folder, go into it, and then run:
npx vue create .
and select the default options.
Then we should get a starter app with single-file components that we can change.
The single-file components have the .vue extension.
When we create an app with Vue CLI, we get App.vue and components/HelloWorld.vue .
They have the structure:
<template>
</template>
<script>
</script>
<style>
</style>
