Hands-on Vue.js: Build a fully functional SPA/

...

/

Single File Components

Single File Components

Learn about single file components in Vue.js.

We'll cover the following...

Single File Components

Vue offers the flexibility to define components in separate files. These files have the .vue extension and contain everything related to that component. .vue files contain three main parts:

  1. <template>
  2. <script>
  3. <style

The structure in which these three tags are placed is presented in the MyComponent.vue file as follows.

Press + to interact
<!-- ./MyComponent.vue -->
<!-- The `template` of MyComponent-->
<template>
  <div id="MyComponent">
    <h1> Hello from the MyComponent. </h1>
  </div>
</template>
<!-- The `data` and `methods` are defiend in script tag-->
<script>
export default {
  name: 'my_component',
  data: function (){
      return{
          counter: 0
      }
  },
  methods: {
      getCounter(){
          return counter;
      }
  }
};
</script>
<!-- The styling of the component is done in style tag -->
<style>
#app {
  font-family: 'Avenir';
  text-align: center;
  color: #green;
  margin-top: 60px;
}
</style>

When the complete definition of the components is stored in their respective files, it becomes even easier ...