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 - neveropen</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 - neveropen</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 - neveropen</h5> </div> </template> |
- index.vue: Now change the content odex.vue file.
index.vue
<template> <div> <h3>This is the Home Page - neveropen</h3> <fileDemo/> </div> </template> |
Start the application: Run the application using the below code.
npm run dev
Output:
