Struggling to pass props into my widget

[richardshergold]

I have my widget working ok and am able to embed it into a non vue website (thanks for making that possible!). However, I'm having problems passing a prop into the widget.

I am passing a token prop in like this:

<schools-widget token="abc"></schools-widget>

And in the main.js file of my widget project I have this:

Vue.customElement('schools-widget', {
  props: [
    'token',
  ],
  router,
  render: h => h(App)
});

but the token is not coming through?

This is my App.vue file but nothing shows up for the token?

<template>
  <div id="app" class="container mt-2 border pt-3 bg-light">
    Token:{{ token }}
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  props: {
    token: String,
  },
};
</script>

What am I doing wrong?

[karol-f]

Can You please prepare CodeSandbox? I've checked and it's working as intended? https://codesandbox.io/s/vue-custom-element-forked-p8dnx?file=/public/index.html

[richardshergold]

Ah, ok I looked at yours and if I do this:

Vue.customElement("nextgen-schools", App);

then it works fine. But the only way I managed to get my router working with my widget was to do this:

Vue.customElement('schools-widget', {
  router,
  render: h => h(App)
});

And if I do that then the prop does not come through?

[karol-f]

Hi, it's working like that - https://codesandbox.io/s/vue-custom-element-forked-s2box?file=/src/main.js

[richardshergold]

working now - thanks!