Начните использовать BlockBuilder с Vue3 — готовый UI и полная интеграция с Vue компонентами
Установите BlockBuilder и убедитесь, что у вас установлен Vue 3:
TypeScript-типы входят в пакет, отдельная установка @types не нужна.
Основной Vue компонент, который предоставляет готовый UI для управления блоками
Vue компоненты, которые используются для рендеринга конкретных типов блоков
Конфигурация с доступными типами блоков, их полями и компонентами
События для отслеживания создания, обновления и удаления блоков
Создайте компонент блока и подключите BlockBuilderComponent:
Важно: внешние отступы (margin) автоматически применяются на UI блок-обёртку над компонентом. Для внутренних отступов (padding) используйте CSS-переменные, которые устанавливаются автоматически. Подробнее об отступах (spacing) →
Вы можете определить несколько типов блоков с разными компонентами и полями:
Важно: при использовании uploadUrl (загрузка через сервер API клиента) ответ сервера ОБЯЗАТЕЛЬНО должен быть объектом с полем src, содержащим URL изображения. Если формат ответа отличается, используйте responseMapper для преобразования ответа к виду объекта с вашими полями и обязательным полем src. Подробнее — поля image и file →
BlockBuilder поддерживает два режима работы. Используйте проп isEdit для управления режимом:
body снимается CSS-класс bb-is-edit-mode (добавляется только в режиме редактирования)spacingOptions.enabled: true. Внешние отступы (margin) применяются автоматически на UI блок-обёртку; для внутренних (padding) используйте CSS-переменные: --spacing-padding-top и --spacing-padding-bottomblock с полями id, type, props, settingsonSave для сохранения блоков (localStorage для разработки или API для продакшена):isEdit="false" для отображения блоков в режиме только просмотра без возможности редактированияЕсли нужен свой UI редактора, используйте @mushket-co/block-builder/core напрямую. Во Vue создайте экземпляр в onMounted, храните в ref, вызывайте методы через await blockBuilder.value?.createBlock(...).
Справочник методов и типов — Обзор API, Методы. Пример — examples/vue3-core-api.
Для серверного рендеринга с Nuxt 3/4 см. раздел Nuxt (SSR). Живые примеры — examples/nuxt3 и examples/nuxt4 в репозитории block-builder (не в demo-bb).