Как реализовать конструктор сайтов?

Question

[Денис]

Есть набор кастомных компонентов на Vue.js.
Предварительно есть конструктор (Grapesjs), который будет использоваться (вроде из коробки не поддерживает Vue компоненты).

Задача: Реализовать конструктор сайтов, используя кастомные компоненты.

Из того, о чем думаю:

• Использую Vue и в нем сам конструктор Grapesjs
  
• Будет бэк на Nest.js(Node.js)
  
• И тут самый большой пробел в знаниях: как билдить собранные в конструкторе сайты, как передавать туда информацию(API)?
  

Как я это представляю:
Есть Nuxt.js, в который приходит команда на сборку очередного сайта с какими-то данными из конструктора.
Или Nuxt сам чекает API и собирает сайты при обнаружении новых данных из конструктора.

Пока представляю всё это очень расплывчато.
Возникает много вопросов:

• Как подружить Grapesjs с Vue компонентами
  
• Придется хранить кастомные компоненты в 2-х местах одновременно? (в проекте Vue с конструктором и в Nuxt) Или есть более простой и правильный способ?
  
• Может я совсем всё усложнил?
  

Comments

[Сергей Сергей]

Будет даже сложнее, чем думается. Grapesjs работает с чистым html, кастомные блоки должны отображаться и парситься из сохраненного html с атрибутами. Вот в этих атрибутах можно будет установить какую-то связь с компонентами из хранилища компонентов.
С другой стороны, если Vue сумеет обрабатывать свои сырые компоненты на лету, то есть, при добавлении кастомного блока Vue сможет распарсить и включить их в работу, то нужно будет перехватывать сохранение в тегах для Vue, ну и парсер кастомных блоков соответствующий.
Подключение скриптов можно описать также в инициализации блоков и компонентов.

Answer 1

[Evgeniy S]

Привет!
GrapesJS крутой конструктор и от наших! Желаю ему процветания и развития!

По делу:
у Грейпа свой рендер и вклинить туда рендер Vue компонентов слегка проблематично.
У грейпа можно писать свои кастомные блоки и плагины, вам нужно изучить как создаются эти кастомы.

как связать с Vue -
подключить в проект Грейпа Vue-фреймворк,
подключить через кастомные блоки vue.js компоненты и сами js файлы
и тогда VUE увидя в разметке свои компоненты (например, ) на лету скомпилирует в HTML со всей реактивностью.

Когда будете экспортировать HTML от грейпа, обязательно в проекте подключите Vue

я так понимаю лучше всего хранить эти сконструированные html странички в базе и доставать их оттуда через API