Adobe XD Plugin VueJs

Question

I'm using the adobe official vue plugin example from their repo called "ui-hello-vue".

It works fine out of the box but I'm finding it hard to put the vue code into a panel.

And strangely it doesn't even seem to let me do console.log anymore.

Even just logging directly to the console when app is initiated doesn't even work.

As I click on the panel to show it there is just a blank panel.

Any ideas?

main.js

// main.js

console.log('FROM HERE');

const styles = require("./styles.css");
const Vue = require("vue").default;
const hello = require("./hello.vue").default

const { Text, Color } = require("scenegraph");

let dialog;
function getDialog() {
    if (dialog == null) {
        document.body.innerHTML = `<dialog><div id="container"></div></dialog>`
        dialog = document.querySelector("dialog");
        var app4 = new Vue({
            el: "#container",
            components: { hello },
            render(h) {
                return h(hello, { props: { dialog } })
            }
        })
    }
    return dialog
}

let panel;

function create() {
  // [1]
  const html = `
<style>
    .break {
        flex-wrap: wrap;
    }
    label.row > span {
        color: #8E8E8E;
        width: 20px;
        text-align: right;
        font-size: 9px;
    }
    label.row input {
        flex: 1 1 auto;
    }
    form {
        width:90%;
        margin: -20px;
        padding: 0px;
    }
    .show {
        display: block;
    }
    .hide {
        display: none;
    }
</style>

<form method="dialog" id="main">
    <div class="row break">
        <label class="row">
            <span>↕︎</span>
            <input type="number" uxp-quiet="true" id="txtV" value="10" placeholder="Height" />
        </label>
        <label class="row">
            <span>↔︎</span>
            <input type="number" uxp-quiet="true" id="txtH" value="10" placeholder="Width" />
        </label>
    </div>
    <footer><button id="ok" type="submit" uxp-variant="cta">Apply</button></footer>
</form>

<p id="warning">This plugin requires you to select a rectangle in the document. Please select a rectangle.</p>
`;

  function increaseRectangleSize() { // [2]
    const { editDocument } = require("application"); // [3]
    const height = Number(document.querySelector("#txtV").value); // [4]
    const width = Number(document.querySelector("#txtH").value); // [5]

    // [6]
    editDocument({ editLabel: "Increase rectangle size" }, function(selection) {
      const selectedRectangle = selection.items[0]; // [7]
      selectedRectangle.width += width; // [8]
      selectedRectangle.height += height;
    });
  }

  panel = document.createElement("div"); // [9]
  panel.innerHTML = html; // [10]
  panel.querySelector("form").addEventListener("submit", increaseRectangleSize); // [11]

  return panel; // [12]
}

function show(event) { // [1]
  if (!panel) event.node.appendChild(create()); // [2]
}

function update(selection) { // [1]
  const { Rectangle } = require("scenegraph"); // [2]

  const form = document.querySelector("form"); // [3]
  const warning = document.querySelector("#warning"); // [4]

  if (!selection || !(selection.items[0] instanceof Rectangle)) { // [5]
    form.className = "hide";
    warning.className = "show";
  } else {
    form.className = "show";
    warning.className = "hide";
  }
}

module.exports = {
    commands: {
        menuCommand: function () {
            getDialog().showModal();
        }
    },
    
    panels: 
    {
        enlargeRectangle: {
            show,
            update
        }
    }
};

mainfest.json

 // mainfest.json

{
    "id": "UI_HELLO_VUE",
    "name": "(UI) Hello Vue",
    "version": "1.0.0",
    "host": {
        "app": "XD",
        "minVersion": "13.0"
    },
    "icons": [
        {
            "width": 24,
            "height": 24,
            "path": "images/icon@1x.png"
        },
        {
            "width": 48,
            "height": 48,
            "path": "images/icon@2x.png"
        }
    ],
    "uiEntryPoints": [
        {
            "type": "menu",
            "label": "UI Hello Vue",
            "commandId": "menuCommand"
        },
        {
            "type": "panel",
            "label": "Enlarge a Rectangle",
            "panelId": "enlargeRectangle"
        }
    ]
}

Answer 1

You are missing semi-colons on 7, 14, 20 & 24. That could explain no error.