Component Discovery in Nuxt.js
Last Updated :
04 Apr, 2022
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:
Share your thoughts in the comments
Please Login to comment...