I started learning VueJs and tend to share it with you step by step. Slowly, but steadily.

In this episode, we are going to see what is a component in VueJs and how we can use it.

With components, we can split the UI into small and reusable pieces and by compositing them solve a problem or make an application.

Defining a Component

Vue component schema:

app.component('component-name', {
  template: `<div>component</div>`,
  data:...
  methods:...
  ,...
})

As you can see it's completely same as defining the app, indeed we can define a component's logic using an object of options such as data, methods.

and with template option we can use the logic and expose as a component.

for instance we are going to define a component that provide a button that counts.
Then by importing <Count/> , it can be used.

Right now we are trying to learn Vue by injecting it to a html file, obviously there are some other ways to define the components and using them will discover them later together.

see you in the next episode

learn more VUE-Components