Обнаружение компонентов в Nuxt.js

Опубликовано: 11 Августа, 2022

В этой статье мы узнаем, как работает обнаружение компонентов в NuxtJs. Nuxt.js — это бесплатная платформа веб-приложений с открытым исходным кодом, основанная на Vue.js, Node.js, Webpack и Babel.js. Nuxt вдохновлен Next.js, фреймворком аналогичного назначения, основанным на React.js.

Создайте приложение NuxtJS:

Шаг 1: Вы можете создать новый проект NuxtJs, используя следующую команду:

npx create-nuxt-app gfg

Шаг 2. Теперь перейдите к своему приложению, используя следующую команду:

cd gfg

Структура проекта: Это будет выглядеть так.

Импорт компонентов: в Nuxt.Js вам не нужно вручную импортировать компоненты. Вы можете просто добавить компонент в папку компонентов, и Nuxt.Js сделает всю работу за вас.

Пример: теперь давайте создадим новый компонент в папке компонентов с именем «Data.vue» и со следующим содержимым.

Data.vue




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

index.vue: Теперь давайте воспользуемся компонентом на домашней странице. Добавьте приведенный ниже код в файл index.vue.

index.vue




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

Запустите приложение: запустите приложение, используя приведенный ниже код.

npm run dev

Выход:

Импорт вложенных компонентов: Вы также можете импортировать вложенные компоненты, изменив имя компонента во время использования.

Пример: давайте создадим новый файл с именем «файл» в каталоге компонентов, а внутри него создадим новый компонент с именем «Demo.vue» и со следующим содержимым.

Demo.vue




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

  • index.vue: Теперь измените содержимое файла odex.vue.

index.vue




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

Запустите приложение: запустите приложение, используя приведенный ниже код.

npm run dev

Выход: