How to make use of panel with vue?

Adobe XD UXP Plugin API
,
1

Hello,

Does anyone know how to make vue.js work with the new plugin panel insead of the modal ?

Thank you a lot.

2

You should be able to convert the Vue modal plugin to a panel one easily. I don’t have any experience with Vue. Anyone else can help here?

1 Like
3

I succeeded to make it work by modifying a bit the file. Was able to move step by step taking React Panel as reference.

But i’m wondering if that is the right way to do it. I also should end up doing some cleanup in the different lifecycle methods provided by XD.

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

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

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



function show(event){
    if (!panel) event.node.appendChild(getpanel());
    //how to do proper cleanup here ?

}

function hide(event){
    // anything needed here ?
}


async function update(){
   // does anything should be done here ?
}

module.exports = {
    panels: {
        plugin_name : {
            show,
            hide,
            update,
        }
    },
};

So If you have insights about best practises for this part, would be really helpful !
Thank you.

1 Like
4

Hey Steve, I noticed you provided an example Vue extension a while back for UXP. Is there any chance we can have the team look at Vue CLI, the official Vue tooling, and provide some manner to make the setup UXP compatible rather than provide an example plugin with very specific webpack setups and only via Vue CDN (instead of node’s Single File Component structure)?

Also where yarn is not a dependency or in the least there’s a complete npm equivalent?

2 Likes
5

That would definitely be awesome and simplify development a lot.