@asnvrn/mg-common

Переиспользуемые Vue 3 компоненты с общими стилями.

Установка

npm install @asnvrn/mg-common

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

Импорт компонентов

<template>
  <CategoryCard image="https://via.placeholder.com/300" title="Category 1" />
</template>

<script setup>
import { CategoryCard } from '@asnvrn/mg-common'
</script>

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

// main.ts или plugins/components.ts
import { components } from '@asnvrn/mg-common'

export default defineNuxtPlugin((nuxtApp) => {
  Object.entries(components).forEach(([name, component]) => {
    nuxtApp.vueApp.component(name, component)
  })
})

Импорт стилей

Общие стили (CSS Reset, утилиты, переменные)

// В app.vue или main.scss
@use '@asnvrn/mg-common/main.scss';

Стили компонентов

// В app.vue или main.scss  
@import '@asnvrn/mg-common/dist/style.css';

Полный импорт стилей

<!-- app.vue -->
<style lang="scss">
@use '@asnvrn/mg-common/main.scss';
@import '@asnvrn/mg-common/dist/style.css';
</style>

Структура стилей

Стили организованы в папке src/assets/scss/:

assets/
├── scss/
│   └── main.scss       # Основные стили пакета
└── svg/icons/          # SVG иконки

Что включено в общие стили

• CSS Reset - обнуление стандартных стилей
• CSS переменные - цветовая палитра, отступы, радиусы, тени
• Утилитарные классы - .container, .text-center, .mb-md и т.д.
• Базовые стили форм - .form-input, .form-label, .form-group
• Базовые кнопки - .btn, .btn--primary, .btn--secondary
• Адаптивные утилиты - .hidden-mobile, .hidden-desktop

Компоненты

• CategoryCard - Карточка категории с изображением и заголовком

Структура компонентов

Компоненты организованы по функциональности в папке src/components/:

components/
└── market/             # Компоненты для маркетплейса
    └── category-card.vue

Иконки

Пакет включает папку с SVG иконками для использования с nuxt-svgo.

Быстрый старт

После установки пакета и настройки nuxt-svgo, иконки автоматически доступны как Vue компоненты:

<template>
  <AccountsIcon />
  <CardsIcon />
  <UsersIcon />
</template>

Доступные иконки

• accounts, cards, cases, companies, events
• news, orders, pages, payments, posts
• promocodes, questions, settings, users, vendors

Импорт конкретной иконки

<template>
  <AccountsIcon />
</template>

<script setup lang="ts">
import AccountsIcon from '@asnvrn/mg-common/icons/accounts.svg'
</script>

Структура иконок

Иконки находятся в папке src/assets/svg/icons/ и доступны через экспорт ./icons.

Подробная документация по иконкам: ICONS.md

Разработка

# Сборка
npm run build

# Режим разработки с отслеживанием изменений
npm run dev

Добавление новых компонентов

1. Создайте новый .vue файл в папке src/
2. Экспортируйте его в src/index.ts
3. Добавьте в объект components для глобальной регистрации
4. Соберите пакет: npm run build