Skip to main content

Creating and Using Vue.js Components

Vue.js is a popular JavaScript framework for building user interfaces. In Vue.js, we use components to build our applications. A component is a reusable instance with a name. So, let's dive into creating and using Vue.js components.

What are Vue.js Components?​

Vue.js components are an abstraction that allow us to build large-scale applications composed of small, self-contained, and often reusable components. If we think about it, almost any type of application interface can be abstracted into a tree of components.

Creating a Vue.js Component​

Creating components in Vue.js is straightforward. We can define a component using Vue.component(tagName, options). Here is an example:

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

In the example above, 'my-component' is the name of the component, and the second argument is an object which contains options such as data, template, methods, etc.

Using Vue.js Components​

Once a component is defined, it can be used in an instance (or even inside other components) via its custom tag name. Let's see a simple example:

<div id="app">
  <my-component></my.component>
</div>
new Vue({ el: '#app' })

In this example, we are creating a new Vue instance and attaching it to the element with the id 'app'. Within this element, we are using the 'my-component' component.

Vue.js Component Options​

The options that you can include in the options object when defining a component are:

  • data - The data object for the component. Note that it must be a function.

  • template - A string template to be used as the markup for the component.

  • methods - Methods that this component has access to.

  • computed - Computed properties for the component.

  • props - Properties that can be passed to the component from its parent.

Here is an example of a component with all these options:

Vue.component('my-component', {
  data: function() {
    return {
      message: 'Hello Vue!'
    }
  },
  template: '<div>{{ message }}</div>',
  methods: {
    sayHello: function() {
      alert(this.message);
    }
  },
  computed: {
    reversedMessage: function() {
      return this.message.split('').reverse().join('')
    }
  },
  props: ['propMessage']
})

In the example above, the component has its own data, a template, a method, a computed property, and a prop. The sayHello method can be called from within the template using @click="sayHello".

Component Registration​

Vue.js provides two types of component registration: global and local. We've seen an example of global registration above using Vue.component().

For local registration, we need to create a JavaScript object and then define it in the components option.

var myComponent = {
  // options
}

new Vue({
  el: '#app',
  components: {
    'my-component': myComponent
  }
})

In this example, 'my-component' is only available within the '#app' instance.

This tutorial has covered the basics of creating and using Vue.js components. There's much more to learn about components, like communication between components, usage of slot for content distribution, and advanced topics like asynchronous components. But for now, you have enough knowledge to start playing around with Vue.js components. Happy coding!