Register components within code

[philippkuehn]

Hey, I try to import a module which registers a component. But this component can’t be used. I get an error Unknown custom element: <custom-component>. The import works fine – CustomModule includes my component.

My code:

<template>
  <vue-live :code="code" :requires="requires" @error="(e) => handleError(e)" />
</template>

<script>
import { VueLive } from 'vue-live'
import { outdent } from '@mvasilkov/outdent'
import CustomModule from '@/customModule/index.js'

export default {
  components: {
    VueLive,
  },

  data() {
    return {
      code: outdent(`
        <template>
          <custom-component />
        </template>

        <script>
          import CustomComponent from 'customModule'

          export default {
            components: {
              CustomComponent,
            },
          }
        <\/script>
      `),
      requires: {
        customModule: CustomModule,
      },
    }
  },
}
</script>

I created a repo with this issue: https://github.com/philippkuehn/gridsome-vue-live-component-bug

[elevatebart]

I like how you challenge this module.
I have a feeling this is going to make it great.

Let me have a look.

[philippkuehn]

Haha nice. Yeah I’m thinking of adding interactive examples to the new docs of https://github.com/ueberdosis/tiptap :)

[elevatebart]

This is working in version 1.14.0.

You could also use the components prop to set up components "globally" in your example and hide them from the code.

[philippkuehn]

Awesome! Thanks!