How to use vue component across multiple node projects?

Question

I'm trying to build a website builder within the drag-and-drop abilities via using Vue3. So, the user will be playing with the canvas and generate a config structure that going to post the backend. Furthermore, the server-side will generate static HTML according to this config.

Eventually, the config will be like the below and it works perfectly. The config only can have HTML tags and attributes currently. Backend uses h() function to generate dom tree.

My question is: can I use .vue component that will generate on the server side as well? For example, the client-side has a Container.vue file that includes some interactions, styles, etc. How can the backend recognize/resolve this vue file?

UPDATE:

Basically, I want to use the Vue component that exists on the Client side on the backend side to generate HTML strings same as exactly client side. (including styles, interactions etc).

Currently, I'm able to generate HTML string via the below config but want to extend/support Vue component itself.

Note: client and server are completely different projects. Currently, server takes config and runs createSSRApp, renderToString methods.

Here is the gist of how server would handle the API:

https://gist.github.com/yulafezmesi/162eafcf7f0dcb3cb83fb822568a6126

{
  id: "1",
  tagName: "main",
  root: true,
  type: "container",
  properties: {
    class: "h-full",
    style: {
      width: "800px",
      transform: "translateZ(0)",
    },
  },
  children: [
    {
      id: "9",
      type: "image",
      tagName: "figure",
      interactive: true,
      properties: {
        class: "absolute w-28",
        style: {
          translate: "63px 132px",
        },
      },
    },
  ],
}

Answer 1

This might get you started: https://vuejs.org/guide/scaling-up/ssr.html#rendering-an-app

From the docs:

// this runs in Node.js on the server.
import { createSSRApp } from 'vue'
// Vue's server-rendering API is exposed under `vue/server-renderer`.
import { renderToString } from 'vue/server-renderer'

const app = createSSRApp({
  data: () => ({ count: 1 }),
  template: `<button @click="count++">{{ count }}</button>`
})

renderToString(app).then((html) => {
  console.log(html)
})

I guess extract the template from request or by reading the submitted Vue file and use that as the template parameter value