Component Discovery in Nuxt.js

In this article, we are going to learn how component discovery works in NuxtJs. Nuxt.js is a free and open-source web application framework based on Vue.js, Node.js, Webpack, and Babel.js. Nuxt is inspired by Next.js, which is a framework of a similar purpose, based on React.js.

Create NuxtJS Application:

Step 1: You can create a new NuxtJs project using the below command:

npx create-nuxt-app gfg

Step 2: Now navigate to your app using the following command:

cd gfg

Project Structure: It will look like this.

Importing Components: In Nuxt.Js you don’t have to manually import the components. You can just add the component in the components folder and Nuxt.Js will do the work for you. 

Example: Now let’s create a new component in the components folder with the name ‘Data.vue’ and with the below content.

Data.vue

<template>
    <div>
    <h5>This is the Data Component - GeeksforGeeks</h5>
    </div>
</template>

index.vue: Now let’s use the component on the homepage. Add the below code in the index.vue file.

index.vue

<template>
    <div>
    <h3>This is the Home Page - GeeksforGeeks</h3>
    <Data/>
    </div>
</template>

Start the application: Run the application using the below code.

npm run dev

Output:

Importing Nested Component: You can also import nested components by changing the name of the component while using. 

Example: let’s create a new file with the name ‘file’ in the component directory, and inside that let’s create a new component with the name ‘Demo.vue’ and with the below content.

Demo.vue

<template>
  <div>
  <h5>This is the Demo - GeeksforGeeks</h5>
  </div>
</template>

• index.vue: Now change the content odex.vue file.

index.vue

<template>
    <div>
    <h3>This is the Home Page - GeeksforGeeks</h3>
    <fileDemo/>
    </div>
</template>

Start the application: Run the application using the below code.

npm run dev

Output: