Descubrimiento de componentes en Nuxt.js

En este artículo, vamos a aprender cómo funciona el descubrimiento de componentes en NuxtJs. Nuxt.js es un marco de aplicación web gratuito y de código abierto basado en Vue.js, Node.js, Webpack y Babel.js. Nuxt está inspirado en Next.js, que es un marco de un propósito similar, basado en React.js.

Crear aplicación NuxtJS:

Paso 1: puede crear un nuevo proyecto NuxtJs usando el siguiente comando:

npx create-nuxt-app gfg

Paso 2: Ahora navegue a su aplicación usando el siguiente comando:

cd gfg

Estructura del proyecto: Se verá así.

Importación de componentes: en Nuxt.Js no tiene que importar manualmente los componentes. Simplemente puede agregar el componente en la carpeta de componentes y Nuxt.Js hará el trabajo por usted. 

Ejemplo: ahora vamos a crear un nuevo componente en la carpeta de componentes con el nombre ‘Data.vue’ y con el siguiente contenido.

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

index.vue: ahora usemos el componente en la página de inicio. Agregue el siguiente código en el archivo index.vue.

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

Inicie la aplicación: Ejecute la aplicación utilizando el siguiente código.

npm run dev

Producción:

Importación de componentes anidados: también puede importar componentes anidados cambiando el nombre del componente mientras lo usa. 

Ejemplo: vamos a crear un nuevo archivo con el nombre ‘archivo’ en el directorio de componentes, y dentro de eso vamos a crear un nuevo componente con el nombre ‘Demo.vue’ y con el contenido a continuación.

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

• index.vue: ahora cambia el contenido del archivo odex.vue.

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

Inicie la aplicación: Ejecute la aplicación utilizando el siguiente código.

npm run dev

Producción: