Components are individual units of an interface that can have their own state, markup, and style.

How to Use Components

Vue components can be defined in four main ways. Let’s take a look at each of them:

1. Instantiating a Vue instance:

new Vue({
  /* options */
})

2. Using Vue.component():

Vue.component('component-name', {
  /* options */
})

3. Using local components: Local components are only accessible by a specific component and not available elsewhere, making them great for encapsulation.

4. Using .vue files (Single File Components): .vue files allow you to define components in a single file format.

In this blog, we will focus on the first three ways in more detail.

When building an application that is not a Single Page Application (SPA), it is common to use new Vue() or Vue.component() to incorporate Vue.js into specific pages, such as a contact form or a shopping cart. Alternatively, Vue can be used on all pages, but the server is responsible for rendering the layout and serving the HTML to the client, which then loads the Vue application.

For SPAs, where Vue is responsible for building the HTML, Single File Components are more commonly used as they offer greater convenience.

To instantiate Vue and mount it on a DOM element, you can use the following code:

new Vue({ el: '#app' })

This is typically used for the main container component, as components initialized with new Vue do not have a corresponding tag name.

Other components used in the application can be initialized using Vue.component(). These components allow you to define a tag, with which you can embed the component multiple times in the application. You can also specify the output of the component in the template property. Here’s an example:

<div id="app">
  <user-name name="Flavio"></user-name>
</div>

Vue.component('user-name', {
  props: ['name'],
  template: '<p>Hi {{ name }}</p>'
})

new Vue({ el: '#app' })

In this example, we are initializing a Vue root component on #app and using the Vue component user-name to abstract our greeting to the user. The component accepts a prop, which is used to pass data down to child components.

When using Vue.component(), the component is given a name, which can be written in either kebab-case or PascalCase. Vue automatically creates an alias from kebab-case to PascalCase and vice versa. It is generally recommended to use PascalCase in JavaScript and kebab-case in the template.

Local Components

Components created using Vue.component() are globally registered, meaning they don’t need to be assigned to a variable or passed around to be reused in templates. However, you can encapsulate components locally by assigning an object that defines the component to a variable. This local component can then be made available inside another component using the components property. Here’s an example:

const Sidebar = {
  template: '<aside>Sidebar</aside>'
}

new Vue({
  el: '#app',
  components: {
    Sidebar
  }
})

You can also write the component in the same file, but using JavaScript modules is generally a better practice. Here’s an example using modules:

import Sidebar from './Sidebar'

export default {
  el: '#app',
  components: {
    Sidebar
  }
}

Reusing a Component

A child component can be added multiple times, with each instance being independent of the others. Here’s an example:

<div id="app">
  <user-name name="Flavio"></user-name>
  <user-name name="Roger"></user-name>
  <user-name name="Syd"></user-name>
</div>

Vue.component('user-name', {
  props: ['name'],
  template: '<p>Hi {{ name }}</p>'
})

new Vue({ el: '#app' })

The Building Blocks of a Component

So far, we have seen how a component can accept the el, props, and template properties. Here are some additional properties that a component can accept:

  • data: The component’s local state
  • methods: The component methods
  • computed: The computed properties associated with the component
  • watch: The watchers associated with the component

While using components in Vue.js, consider these building blocks to create dynamic and reusable interfaces.