Composition API интеграция

Naive UI — это современная Vue 3 UI-библиотека, оптимизированная для работы с Composition API. В отличие от Options API, Composition API позволяет организовать логику компонентов более гибко и модульно, что особенно полезно при работе с крупными интерфейсами.

Импорт и регистрация компонентов

При использовании Composition API компоненты Naive UI импортируются непосредственно в скрипт компонента:

<script setup>
import { NButton, NInput, NModal } from 'naive-ui'
</script>

Регистрация происходит автоматически благодаря <script setup>. При использовании обычного <script> можно зарегистрировать компоненты через объект components:

<script>
import { defineComponent } from 'vue'
import { NButton, NInput } from 'naive-ui'

export default defineComponent({
  components: { NButton, NInput }
})
</script>

Работа с реактивными данными

Composition API использует ref и reactive для создания реактивного состояния. Naive UI отлично интегрируется с этими реактивными объектами, позволяя синхронизировать значения компонентов напрямую:

<script setup>
import { ref, reactive } from 'vue'
import { NInput, NButton } from 'naive-ui'

const form = reactive({
  username: '',
  email: ''
})

const submitForm = () => {
  console.log(form.username, form.email)
}
</script>

<template>
  <n-input v-model:value="form.username" placeholder="Имя пользователя" />
  <n-input v-model:value="form.email" placeholder="Email" />
  <n-button @click="submitForm">Отправить</n-button>
</template>

В примере v-model:value синхронизирует реактивное состояние с полями ввода. Использование reactive позволяет группировать данные формы в одном объекте, что упрощает их передачу и валидацию.

Управление состоянием модальных окон

Naive UI предоставляет компонент NModal для работы с модальными окнами. С Composition API управление состоянием выполняется через реактивные переменные:

<script setup>
import { ref } from 'vue'
import { NButton, NModal } from 'naive-ui'

const showModal = ref(false)

const openModal = () => showModal.value = true
const closeModal = () => showModal.value = false
</script>

<template>
  <n-button @click="openModal">Открыть модальное окно</n-button>
  <n-modal v-model:show="showModal" title="Пример модального окна">
    Содержимое модального окна
  </n-modal>
</template>

Использование v-model:show делает привязку состояния модального окна прозрачной и удобной.

Динамическая работа с компонентами

Composition API облегчает создание динамических интерфейсов с Naive UI. Например, генерация списка кнопок с разными действиями:

<script setup>
import { reactive } from 'vue'
import { NButton } from 'naive-ui'

const buttons = reactive([
  { label: 'Сохранить', action: () => console.log('Сохранено') },
  { label: 'Удалить', action: () => console.log('Удалено') },
  { label: 'Отменить', action: () => console.log('Отменено') }
])
</script>

<template>
  <div>
    <n-button
      v-for="(btn, index) in buttons"
      :key="index"
      @click="btn.action"
    >
      {{ btn.label }}
    </n-button>
  </div>
</template>

Использование массива с реактивными объектами упрощает управление коллекциями компонентов и позволяет легко добавлять новые элементы интерфейса без изменения шаблона.

Использование провайдеров и глобальных настроек

Naive UI предоставляет create функцию для глобальной конфигурации компонентов. Composition API позволяет использовать эти провайдеры в пределах функционального компонента:

<script setup>
import { NConfigProvider, NButton } from 'naive-ui'

const config = {
  components: {
    NButton: {
      size: 'large',
      type: 'primary'
    }
  }
}
</script>

<template>
  <n-config-provider :theme-overrides="config">
    <n-button>Глобально настроенная кнопка</n-button>
  </n-config-provider>
</template>

NConfigProvider позволяет централизованно управлять стилями и поведением компонентов, что особенно полезно в крупных приложениях с множеством повторяющихся элементов интерфейса.

Реактивная валидация форм

Naive UI совместим с любыми реактивными схемами валидации, например, через библиотеку @vuelidate/core или собственные функции:

<script setup>
import { reactive, computed } from 'vue'
import { NInput, NButton } from 'naive-ui'

const form = reactive({
  username: '',
  email: ''
})

const isValid = computed(() => form.username.length > 0 && form.email.includes('@'))

const submitForm = () => {
  if (isValid.value) {
    console.log('Форма корректна', form)
  } else {
    console.log('Ошибка валидации')
  }
}
</script>

<template>
  <n-input v-model:value="form.username" placeholder="Имя пользователя" />
  <n-input v-model:value="form.email" placeholder="Email" />
  <n-button :disabled="!isValid" @click="submitForm">Отправить</n-button>
</template>

В этом примере использование computed позволяет автоматически отслеживать состояние формы и блокировать кнопку отправки до момента корректного заполнения.

Комбинирование Composition API с слотовой структурой

Naive UI поддерживает работу со слотами, что позволяет комбинировать Composition API и сложную разметку компонентов:

<script setup>
import { NCard, NButton } from 'naive-ui'

const handleClick = () => console.log('Нажата кнопка внутри карточки')
</script>

<template>
  <n-card title="Карточка с действиями">
    <template #footer>
      <n-button @click="handleClick">Действие</n-button>
    </template>
    Основное содержимое карточки
  </n-card>
</template>

Слоты позволяют отделять структуру интерфейса от логики компонента, что упрощает повторное использование и тестирование кода.

Интеграция с Vue Router и динамическими маршрутами

Композиционный подход идеально подходит для работы с Vue Router и Naive UI. Реактивные данные могут управлять навигацией:

<script setup>
import { useRouter } from 'vue-router'
import { NButton } from 'naive-ui'

const router = useRouter()

const goToPage = (path) => router.push(path)
</script>

<template>
  <n-button @click="() => goToPage('/dashboard')">Перейти на Dashboard</n-button>
</template>

Такой подход обеспечивает гибкое управление маршрутизацией без усложнения шаблона и позволяет комбинировать навигацию с реактивными состояниями компонентов Naive UI.

Оглавление