Search⌘ K
AI Features
Home
Courses
Hands-on Vue.js: Build a fully functional SPA

Single File Components

Explore how to create modular and reusable Vue components using single file .vue files that include templates, scripts, and styles. Understand how to organize components locally and globally to simplify large Vue.js projects and enable cleaner application structure and maintenance.

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.

HTML
<!-- ./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 to ...