Home
  • Dec 24, 2021
  • Post Nº 194

Using Component in Vue.js

Avoid having thousands of lines of code in a single file.

Question

My *.vue files are getting bigger and bigger. It’s hard to maintain. I would like to split the file and move part of the structure (HTML) and the logic (JS) to another location. Is it possible?

Answer

You can do that by using components. You can extract part of the structure from the original vue file to a new file and then import the component again into the original one. Let’s say we have two files:

  • my-page.vue – the main page that contains most of the logic and it’s getting big, probably 1000+ lines of code.
  • my-component.vue – the new component that you are creating

First of all, you need to declare the structure in the component file. The component should contain the HTML structure in the template section and the logic in the script section. The logic usually contains the properties (props), which are the fields passed from the main page when creating the component; the data fields that are present during the lifecycle of the component; the methods that are used for operating the template, such as loading resources from the backend via RESTful APIs, methods for displaying or hiding certain blocks, etc.

<template>
  <!-- TODO Add content for your resource (component) here -->
</template>

<script>
export default {
  props: {
    resourceId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      isLoading: true,
      resource: null
    }
  },
  methods: {
    loadResource() {
       // TODO Implement async HTTP call here
    }
  }
}
</script>

<style>
// CSS goes here
</style>

Then you need to import and use the new component in your main page.

<template>
  <div>
    <!--
      Use the component here.

      The property "resourceId" becomes kebab case: "resource-id"
    -->
    <my-component resource-id="foo">

    <!-- ... -->
  </div>
</template>
<script>
import MyComponent from "@/path/to/my-component.vue"

export default {
  components: { MyComponent },
  props: { ... },
  methods: { ... },
}
</script>

<style>
// CSS goes here
</style>

Using components has many benefits. Some of them are:

  • Having clear input parameters for an element
  • Making logic easy to understand, i.e. avoid having huge files
  • Making tests easy
  • Re-use the same component in multiple pages

Going Further

How to go further from here?

  • Read the official Style Guide provided by Vue.js to learn the best practices about this framework.

Hope you enjoy this article, see you the next time!

Search