Vue Router

#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

0 Likes

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

0 Likes

#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 }
]
0 Likes

#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.

0 Likes

#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/>
0 Likes

#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

0 Likes