Is it component definition in vue? How do I find whether it is a component by looking at the code?

Question

When I search for something I came across this post

Here, something, I believe it is component, is defined as below.

export default {
  name: 'app',
  methods: {
    testFunction: function (event) {
      console.log('test clicked')
    }
  },
  components: {
    Test
  }
}

As per the documentation, I came across this

import BaseButton from './BaseButton.vue'
import BaseIcon from './BaseIcon.vue'
import BaseInput from './BaseInput.vue'

export default {
  components: {
    BaseButton,
    BaseIcon,
    BaseInput
  }
}

I really not sure, whether app is a component which contains Test. Is it the component definition in export? How do we understand that is a component from vue code?

Is it only by the below ways?

1. Vue.component
2. components in Vue instance
3. Not sure - the export default way?

I understand that I sound different because it is Javascript. Could someone help me with this?

Answer 1

There are conventionally, three different types of components in Vue JS.

• Root Component
• View Component
• Normal Component

In a conventional structure the Root component is named 'app' and is passed to the Vue instance when initializing the App for the first time. This component can not be imported and reused inside other components as it will cause a recursive effect. For example this App.vue file is a Root component. It is used inside this main.js file and passed to the Vue instance using new Vue.

The View components are dynamically added or removed from the Root component based on the route. They are written and act as normal component and are only used for Vue router component property. For example the Home and Comments components inside this Router index file are known as View components. They are passed inside the route objects as components inside individual routes. When the app navigates to that particular route, the <router-view> template inside the App.vue file gets replace with the template of the corresponding View component.

Normal components can be used anywhere and are imported by other components. They can be imported inside the View components as well as the Root components. For example, in root component App.vue we see the component Navbar is used. In View component Comments.vue the Replies component is used.

All these components are identical in declaration and behavior but differ in usage.