Single File Components

This entry is part 49 of 55 in the series Vue.js: From Beginner to Professional

Now that we have taken a look at the structure of the project, let’s talk more about the App.vue file. This file consists of a so-called single file component. We can see this on the file name, which has the vue extension. This is a convention for single file components. These files contain a template within a HTML5 template element at the top, followed by a script tag, and lastly a style tag. So the following structure:

<template>

</template>

<script>

</script>

<style>

</style>

The script tag is not required, and neither is the style tag. But if you want to add any logic to the template, such as events and string interpolation, then you will need a script tag that exports an object. While the template is not special, except that it is wrapped within a template element, the script tag is a bit special.

Here we must export an object, which is generally identical to the objects that we would pass to Vue instances. Since we should only export this object within the file, then we don’t have to give it a name, and instead use the default keyword, which is part of the ES6 module system.

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

Instead, we can give the object a name that we choose when importing it.

import App from './App.vue';

This file structure is specific to Vue.js, hence the vue file extension. The file gets compiled to JavaScript by webpack, and vue-loader takes care of understanding this file structure and handling it correctly.

While you saw how to make use of such a single file component in this project, we will be taking a closer look at it when we begin learning about components, so that’s all I wanted you to know for now.

Series Navigation<< Understanding the Project StructureBuilding Vue.js Applications for Production >>

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *