Adobe XD Plugin VueJs - vue.js

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.