How to implement a website builder?

Question

Vue.js

There is a set of custom components on Vue.js.
There is a constructor ( Grapesjs ) that will be used beforehand (doesn't seem to support Vue components out of the box).

Task: Implement a website builder using custom components.

From what I'm thinking:

• I use Vue and Grapesjs constructor in it
  
• There will be a back on Nest.js (Node.js)
  
• And here is the biggest gap in knowledge: how to build the sites assembled in the constructor, how to transfer information (API) there?
  

How I imagine it:
There is Nuxt.js, which receives a command to build the next site with some data from the constructor.
Or Nuxt itself checks the API and collects sites when new data is found from the constructor.

For the time being, this is all very vague.
Many questions arise:

• How to make Grapesjs friends with Vue components
  
• Will you have to store custom components in 2 places at the same time? (in Vue project with constructor and in Nuxt) Or is there an easier and more correct way?
  
• Maybe I've overcomplicated it?
  

Answer 1

Hey!
GrapesJS cool constructor from ours! I wish him prosperity and development!
To the point:
Grape has his own render and it’s a bit problematic to wedge in the render of Vue components.
Grape allows you to write your own custom blocks and plugins, you need to learn how these custom are created.
how to connect with Vue -
connect the Vue framework to the Grape project,
connect the components and the js files themselves through custom vue.js blocks,
and then VUE, seeing its components in the markup (for example, ) will compile on the fly to HTML with all reactivity.
When you export HTML from Grape, be sure to include Vue in the project
as I understand it, it's best to store these constructed html pages in the database and get them from there through the API