Nuxt компоненты (components)

Папка components

В Nuxt для каждого типа файлов, который будет использоваться в нашем проекте, необходимо создать отдельную директорию с определённым названием. Эта директория будет обрабатываться фреймворком. Это достаточно удобно, так как создаёт стандарты и позволяет программистам писать код в более структурированном виде, не придумывая свои собственные названия папок.

Первой папкой, которую мы с вами рассмотрим, будет директория для компонентов.

Создание директории для компонентов

Директория components будет содержать все переиспользуемые Vue компоненты нашего приложения. Давайте попробуем создать простой компонент.

Итак, я создаю директорию components. Далее, давайте создадим в ней простой Vue-компонент, используя Composition API. Назовём его, например, TestComponent. Всё, что этот компонент будет делать — выводить в шаблоне заголовок "Привет, мир!".

<script setup lang="ts">
</script>

<template>
  <h1>Привет мир</h1>
</template>

<style scoped>
</style>

Подключение компонента

Теперь, чтобы использовать этот компонент в главном файле App.vue, указываем его там. Обратите внимание, что моя IDE автоматически сгенерировала конструкцию импорта этого компонента. Давайте её просто удалим. Как вы видите, компонент автоматически загрузился.

<template>
  <div>
    <TestComponent></TestComponent>
  </div>
</template>

Это одно из главных преимуществ — нам не нужно каждый раз импортировать компоненты вручную. В документации также указано, что все компоненты, созданные в директории components, будут автоматически доступны во всём приложении без необходимости явного импорта.

Таким образом, достаточно просто указать имя компонента, и он автоматически станет доступен во всём приложении.