Пакет @aceramica/layer-common

Краткое описание

@aceramica/layer-common — это переиспользуемый слой (layer) для Nuxt 3-приложений, содержащий общие UI-компоненты. Используется как единая точка переиспользования компонентов между фронтендами организации

Назначение

Цель пакета — стандартизировать дизайн-систему и компоненты, обеспечивая единообразие интерфейсов и сокращая дублирование кода между приложениями

Основной функционал

• ✅ Глобальные базовые компоненты (ButtonUp, ColorModeButton, Footer, Header, PopupCookie)
• ✅ Общие конфиги (app.config.ts)

Ключевая структура (относящееся к core-логике)

layer-common/
├─ .vscode/
│   └─ settings.json # настройки VSCode
├─ components/ # компоненты для общей UI-системы
│  ├─ ButtonUp.vue
│  ├─ ColorModeButton.vue
│  ├─ Footer.vue
│  ├─ Header.vue
│  └─ PopupCookie.vue
├─ playground/ # среда для разработки и тестирования
├─ nuxt.config.ts # конфиг Nuxt 3
├─ app.config.ts # общие конфиги приложения
└─ package.json # зависимости и скрипты для разработки

Компоненты

Компонент	Назначение
Header	Шапка сайта
Footer	Подвал сайта
PopupCookie	Баннер уведомления о cookies
ColorModeButton	Переключение светлой/тёмной темы
ButtonUp	Кнопка прокрутки наверх страницы

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

Установка пакета

npm install @aceramica/layer-common

Подключение в Nuxt 3 приложения

Добавь в nuxt.config.ts:

export default defineNuxtConfig({
	extends: ['@aceramica/layer-common'],
})

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

Компоненты доступны глобально, явный импорт не нужен, пример:

<template>
	<div class="wrapper">
		<Header />
		<main></main>
		<ButtonUp />
		<Footer />
	</div>
</template>

Обновление и публикация

Перед публикацией убедись, что:

• Обновлена версия в package.json
• Изменения протестированы в песочнице (playground) и ошибок или багов нет

Публикация:

npm run release

Подробнее о публикации и релизах можно прочитать в разделе Работа с npm-пакетами

Совместимость

• Nuxt: ^3.x
• Vue: ^3.4.x
• TypeScript: поддерживается, типы генерируются автоматически

Рекомендации по расширению

• Использовать слой только для общей UI-системы, все общие утилиты и функции должны быть в @aceramica/nuxt-shared
• Не оставлять код бизнес-логики в компонентах

Вклад в проект

Локальная разработка

# Установка зависимостей
npm install

# Генерация типов
npm run dev:prepare

# Запуск playground для разработки
npm run dev

# Билд playground
npm run dev:build

# Релиз новой версии
npm run release

Особенности разработки

• Используется auto-import компонентов через nuxt (нет необходимости явно импортировать)
• Все компоненты оформлены в PascalCase
• Для стилизации используется TailwindCSS
• Используется UI-библиотека готовых компонентов Nuxt UI
• Поддержка Color Mode реализована через @nuxtjs/color-mode, встроенный в Nuxt UI

Связанные пакеты

• @aceramica/nuxt-shared — общие утилиты