Vue Router

Adobe XD UXP Plugin API
1

I tried vue-router with vue-template-compiler. It failed with the following error. Not supported?

EvalError: Code generation from strings disallowed for this context in
with(this){return _c('div',{attrs:{"id":"container"}})}

...
...
const Vue = require("vue").default;
const hello = require("./hello.vue").default;
const VueRouter = require("vue-router").default;
Vue.use(VueRouter);
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const routes = [
     { path: '/', component: hello },
     { path: '/foo', component: Foo },
     { path: '/bar', component: Bar }
]

 const router = new VueRouter({
     routes // short for `routes: routes`
})

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

It worked with chrome browser

2

Ah – so Vue must use eval or similar, which the XD execution environment blocks. Is there a setting on the router that avoids using eval?

3

thank you for your info.

I tried with webpack-simple and now it is working!

Another issue was a template tag in main.js for routing. If it is replaced for importing an actual .vue, it shows up.

const Foo = require("./foo.vue").default;  // OK
const Bar = { template: '<h3>bar</h3>' }  // NG
const routes = [
  { path: '/', component: hello },
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]
4

Hmm.

I’m far from a Vue expert here. Can you explain a little what the difference between what Foo is and Bar is? Are they both resolving to an object of { template: '<html>' }, or is there more to Foo than Bar?

Actually, it might help to see what foo.vue looks like, if you have an example.

5

foo.vue shows up with “Foo” but Bar does not render ‘<h3>bar</h3>’

<template>
  <div id="foo">
    <h1>{{ msg }}</h1>
  </div>
</template>
<script>
export default {
  name: "foo",
  data() {
    return {
      msg: "Foo"
    };
  }
};
</script>
<style/>
6

It has been working well on Windows 10 but it turns out it fails on Mac. I ported the ui-playground sample in Vue. Is XD configured with custom URL - plugin?

I could not select XD from Choose Application in the dialog

2019-03-07_1102
2019-03-07_1102.png2870×1432 416 KB

7

Hi @kwiksher, could you briefly explain why you don’t get anymore this annoying error? I have the same error with my React plugin. I am looking for a way to bypass it.

8

It was resolved with webpack. The code generation of vue router on runtime causes the error, so webpacking is a solution like generating a static site.

Howerver because of the custom URL issue on macOS, I stopped to use vue router to control the tabs. CSS tab navigation is the one I use in my plugin.

1 Like
9

@kwiksher But how did you managed it make it work exactly, what did you put inside the of webpack.config ? Is it devtool: ‘#eval-source-map’ ?
Or what actually have changed so you don’t get that error anymore?

10

yes, webpack-simple uses the eval-source-map.

1 Like