Vue Server side rendering with dynamicContentMacros

Confluence Development Confluence Cloud
, ,
1

Hello Everyone,

I’m creating a new connect app that is using VUE frontend. I’m trying to use Server side rendering for my macros. The StaticContentMacro with SSR is running as expected, but with DynamicContentMacros I’m running into “App is not responding. Wait or cancel?” error.

Atlassian Connect File

      {
        "url": "potato?&pageId={page.id}&pageVersion={page.version}&macroId={macro.id}&macroBody={macro.body}",
        "key": "potato",
        "name": {
          "value": "Potato"
        },
        "description": {
          "value": "Display a potato"
        },
        "documentation": {
          "url": "potato-doc-url"
        },
        "width": "100%",
        "icon": {
          "url": "potato-image.png"
        },
        "categories": [
          "confluence-content"
        ],
        "outputType": "block",
        "bodyType": "rich-text",
        "featured": true
      },

Here how the app.js file looks like

import Vue from 'vue';
import { createRenderer } from 'vue-server-renderer';

app.get('/potato', (req, res) => {
  const app = new Vue({
    data: {
      macroBody: req.body.macroBody,
    },
    template: '<div v-html="macroBody"></div>',
  });
  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error');
      return;
    }
    res.end(`
      <!DOCTYPE html>
      <html lang="en">
        <head><title>Hello</title></head>
        <body>${html}</body>
      </html>
    `);
  });
});

I see the Test string and app not loading error

Screenshot 2023-10-20 at 15.03.07
Screenshot 2023-10-20 at 15.03.071566×458 13.5 KB

Thanks.

2

Hi Kardee, I think you forgot to add the editor url
https://developer.atlassian.com/cloud/confluence/modules/macro-editor/

"dynamicContentMacros": [{
// ...
       "editor": {
          "url": "potato-editor",
          "editTitle": {
            "value": "Edit the potato macro"
          },
          "insertTitle": {
            "value": "Potato macro"
          }
        },
// ...

You should also look into the renderModes property (https://developer.atlassian.com/cloud/confluence/modules/macro-render-modes/)