Vue Server side rendering with dynamicContentMacros

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={}&pageVersion={page.version}&macroId={}&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": [
        "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');
      <!DOCTYPE html>
      <html lang="en">

I see the Test string and app not loading error


Hi Kardee, I think you forgot to add the editor url

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

You should also look into the renderModes property (