Single File Components

Published on April 29, 2017 by

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.

Featured

Learn Vue.js today!

Take an online course and become an Vue.js champion!

Here is what you will learn:

  • How to build advanced Vue.js applications (including SPA)
  • How Vue.js works under the hood
  • Communicating with services through HTTP
  • Managing state of large applications with Vuex
  • ... and much more!
Vue.js logo
Author avatar
Bo Andersen

About the Author

I am a back-end web developer with a passion for open source technologies. I have been a PHP developer for many years, and also have experience with Java and Spring Framework. I currently work full time as a lead developer. Apart from that, I also spend time on making online courses, so be sure to check those out!

Leave a Reply

Your e-mail address will not be published.