Vue Router

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;
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");
        var app4 = new Vue({
            el: "#container",
            components: { hello, Foo, Bar },
    return dialog

It worked with chrome browser

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?

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 }


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.

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

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

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

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.

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

@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?

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

1 Like