Nuxt интеграция

Для интеграции Element Plus в проект на Nuxt 3 используется официальный плагин. Начать следует с установки пакета через npm или yarn:

npm install element-plus
# или
yarn add element-plus

После установки создается плагин для регистрации компонентов глобально. В папке plugins создается файл, например element-plus.js:

import { defineNuxtPlugin } from '#app'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(ElementPlus)
})

Использование плагина позволяет использовать все компоненты Element Plus в любом месте приложения без повторного импорта.

Глобальные стили и кастомизация темы

Element Plus поддерживает глобальные стили и переменные для темизации. Для этого используется файл стилей с переменными SCSS:

// assets/styles/element-variables.scss
$--color-primary: #409eff;
$--font-size-base: 14px;

Подключение переменных осуществляется через конфигурацию Nuxt (nuxt.config.ts):

export default defineNuxtConfig({
  css: [
    'element-plus/dist/index.css',
    '~/assets/styles/element-variables.scss'
  ],
  build: {
    transpile: ['element-plus']
  }
})

Это позволяет централизованно изменять основные цвета, размеры и шрифты компонентов.

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

Компоненты Element Plus можно использовать как глобально, так и локально. Пример глобального использования кнопки:

<template>
  <el-button type="primary">Основная кнопка</el-button>
</template>

Для локального использования:

<script setup>
import { ElButton } from 'element-plus'
</script>

<template>
  <el-button type="success">Локальная кнопка</el-button>
</template>

Работа с формами и валидацией

Компоненты форм, такие как el-form, el-input, el-select, интегрируются с Vuelidate или встроенными правилами Element Plus. Пример формы с валидацией:

<template>
  <el-form :model="form" :rules="rules" ref="formRef">
    <el-form-item label="Имя" prop="name">
      <el-input v-model="form.name" />
    </el-form-item>
    <el-form-item label="Email" prop="email">
      <el-input v-model="form.email" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">Отправить</el-button>
    </el-form-item>
  </el-form>
</template>

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

const formRef = ref(null)
const form = ref({
  name: '',
  email: ''
})
const rules = {
  name: [{ required: true, message: 'Введите имя', trigger: 'blur' }],
  email: [
    { required: true, message: 'Введите email', trigger: 'blur' },
    { type: 'email', message: 'Неверный формат email', trigger: ['blur', 'change'] }
  ]
}

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

Ленивая загрузка компонентов

Для уменьшения размера сборки в Nuxt 3 можно использовать онлайн-импорт компонентов через unplugin-vue-components. Установка:

npm install -D unplugin-vue-components unplugin-auto-import

Конфигурация в nuxt.config.ts:

import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineNuxtConfig({
  vite: {
    plugins: [
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  },
})

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

Работа с модальными окнами и уведомлениями

Element Plus предоставляет глобальные сервисы: ElMessage, ElMessageBox, ElNotification. Их использование в Nuxt аналогично:

import { ElMessage, ElMessageBox } from 'element-plus'

function showMessage() {
  ElMessage({
    message: 'Данные сохранены',
    type: 'success'
  })
}

async function confirmAction() {
  try {
    await ElMessageBox.confirm('Вы уверены?', 'Подтверждение', {
      confirmButtonText: 'Да',
      cancelButtonText: 'Нет',
      type: 'warning'
    })
    console.log('Подтверждено')
  } catch {
    console.log('Отменено')
  }
}

Настройка локализации

Element Plus поддерживает мультиязычность. Для интеграции:

npm install element-plus@next

Импорт и настройка локали:

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import ru from 'element-plus/es/locale/lang/ru'

const app = createApp(App)
app.use(ElementPlus, { locale: ru })

В Nuxt 3 это делается через плагин plugins/element-plus.js:

import { defineNuxtPlugin } from '#app'
import ElementPlus from 'element-plus'
import ru from 'element-plus/es/locale/lang/ru'
import 'element-plus/dist/index.css'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(ElementPlus, { locale: ru })
})

Использование иконок

Element Plus имеет отдельный пакет иконок @element-plus/icons-vue. Установка:

npm install @element-plus/icons-vue

Пример использования:

<script setup>
import { Search } from '@element-plus/icons-vue'
</script>

<template>
  <el-button icon="Search">Поиск</el-button>
</template>

Или с динамическим компонентом:

<el-button>
  <component :is="Search" />
  Поиск
</el-button>

Настройка темы через SCSS переменные

Для полного контроля над стилями рекомендуется использовать SCSS-переменные с vite-plugin-style-import или через глобальный SCSS-файл:

// assets/element-custom.scss
$--color-primary: #1f8ceb;
$--button-border-radius-base: 6px;
$--input-height-base: 40px;

Подключение через nuxt.config.ts:

css: ['~/assets/element-custom.scss'],
build: {
  transpile: ['element-plus']
}

Это позволяет создавать уникальный дизайн интерфейса, полностью совместимый с компонентами Element Plus.

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

Компоненты, такие как el-menu или el-breadcrumb, легко интегрируются с Nuxt Router для динамического построения меню:

<template>
  <el-menu :default-active="activePath" router>
    <el-menu-item v-for="route in routes" :key="route.path" :index="route.path">
      {{ route.name }}
    </el-menu-item>
  </el-menu>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()

const routes = [
  { path: '/home', name: 'Главная' },
  { path: '/about', name: 'О сайте' }
]

const activePath = route.path
</script>

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

Оглавление