Nuxt.js интеграция

Для интеграции Naive UI в проект на Nuxt.js сначала необходимо установить библиотеку через npm или yarn:

npm install naive-ui
# или
yarn add naive-ui

После установки следует подключить Naive UI глобально. В Nuxt 3 это делается через плагин. Создается файл, например, plugins/naive-ui.js:

import { defineNuxtPlugin } from '#app'
import { create, NButton, NInput } from 'naive-ui'

export default defineNuxtPlugin((nuxtApp) => {
  const naive = create({
    components: [NButton, NInput] // можно подключить только необходимые компоненты для оптимизации
  })
  nuxtApp.vueApp.use(naive)
})

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

Для Nuxt 2 интеграция похожа, но используется объект Vue.use() в plugins/naive-ui.js:

import Vue from 'vue'
import { create, NButton, NInput } from 'naive-ui'

Vue.use(create({
  components: [NButton, NInput]
}))

После этого плагин нужно зарегистрировать в nuxt.config.js:

export default {
  plugins: ['~/plugins/naive-ui.js']
}

Использование компонентов Naive UI

Кнопка (NButton)

Компонент NButton позволяет создавать кнопки с разными стилями и состояниями. Пример базового использования:

<template>
  <n-button type="primary" @click="handleClick">
    Нажми меня
  </n-button>
</template>

<script setup>
const handleClick = () => {
  console.log('Кнопка нажата')
}
</script>

Ключевые параметры:

  • type – определяет стиль кнопки (primary, info, success, warning, error, default).
  • size – размер кнопки (small, medium, large).
  • disabled – блокировка кнопки.

Инпут (NInput)

Компонент NInput обеспечивает расширенные возможности для ввода данных:

<template>
  <n-input v-model="value" placeholder="Введите текст" clearable />
</template>

<script setup>
import { ref } from 'vue'

const value = ref('')
</script>

Особенности:

  • v-model – двусторонняя привязка данных.
  • clearable – кнопка для очистки значения.
  • Поддержка слотов prefix и suffix для иконок или элементов управления.

Темизация и стилизация

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

import { create, darkTheme, lightTheme } from 'naive-ui'

const naive = create({
  theme: darkTheme
})

Можно также создавать кастомные темы через объект:

const customTheme = {
  common: {
    primaryColor: '#ff4d4f',
    borderRadius: '6px'
  }
}

const naive = create({
  theme: customTheme
})

Для переключения темы в runtime используется метод naive.configProvider.theme = newTheme.

Глобальная регистрация и оптимизация

Для крупных проектов важно глобально регистрировать только необходимые компоненты. Это снижает размер бандла и ускоряет загрузку. Например:

import { create, NButton, NCard, NInput } from 'naive-ui'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(create({
    components: [NButton, NCard, NInput]
  }))
})

Также Naive UI поддерживает tree-shaking, что позволяет подключать только используемые функции и темы:

import { NButton } from 'naive-ui'

Использование провайдера конфигурации

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

<template>
  <n-config-provider :theme="customTheme">
    <n-button>Кнопка с темой</n-button>
  </n-config-provider>
</template>

<script setup>
const customTheme = {
  common: {
    primaryColor: '#52c41a'
  }
}
</script>

Провайдер можно использовать для локальной темы отдельного блока, не затрагивая остальные компоненты приложения.

Сборка и SSR

Naive UI полностью поддерживает Server-Side Rendering (SSR), что важно для Nuxt.js. В Nuxt 3 нет необходимости использовать специальные настройки, достаточно подключить компоненты через плагин. В Nuxt 2 следует убедиться, что плагины отмечены как ssr: true:

export default {
  plugins: [
    { src: '~/plugins/naive-ui.js', ssr: true }
  ]
}

Все компоненты Naive UI корректно рендерятся на сервере и клиенте, что обеспечивает SEO-дружелюбность и быстрый Time-to-Interactive.

Адаптивность и RTL

Naive UI поддерживает адаптивную верстку и Right-to-Left (RTL) режим. Для включения RTL необходимо использовать rtl: true в конфигурации:

const naive = create({
  rtl: true
})

Это автоматически меняет направление всех компонентов, включая отступы и выравнивание.

Комбинирование с Nuxt Composition API

Naive UI идеально интегрируется с Composition API:

<template>
  <n-button :disabled="loading" @click="submit">
    {{ loading ? 'Загрузка...' : 'Отправить' }}
  </n-button>
</template>

<script setup>
import { ref } from 'vue'

const loading = ref(false)

const submit = async () => {
  loading.value = true
  await new Promise(r => setTimeout(r, 1000))
  loading.value = false
}
</script>

Пример демонстрирует реактивность, интеграцию с ref и асинхронными действиями, что удобно для форм и динамических интерфейсов.

Работа с модальными окнами и диалогами

Naive UI предоставляет компоненты NDialog, NMessageProvider, NNotificationProvider для управления модальными окнами и уведомлениями:

<template>
  <n-dialog v-model:show="showDialog" title="Подтверждение">
    <template #default>
      Вы уверены, что хотите продолжить?
    </template>
    <template #footer>
      <n-button @click="showDialog = false">Отмена</n-button>
      <n-button type="primary" @click="confirm">Ок</n-button>
    </template>
  </n-dialog>
</template>

<script setup>
import { ref } from 'vue'

const showDialog = ref(false)
const confirm = () => {
  console.log('Подтверждено')
  showDialog.value = false
}
</script>

Такой подход позволяет легко интегрировать модальные окна и уведомления в Nuxt.js с полным контролем над состоянием через реактивные переменные.

Эти техники создают основу для полной интеграции Naive UI с Nuxt.js, обеспечивая модульность, SSR-поддержку и легкую кастомизацию интерфейсов.

Оглавление