Appearance

Plugins ​

$customElements.registerEntry ​

INFO

The plugin $customElements.registerEntry is equal to the composable useCustomElements

$customElements.registerEntry is used to include the defined entries during development.

This allows you to include the components without a separate import and allows you to test as a custom-elements integration.

The registration is called in created or mounted. After registration it is possible to call the custom-element tags in the template. Only the tags that have been added to the entry are available.

Place the relevant tags in a client-only tag, this is important so that the tag is not resolved in SSR.
Alternatively, SSR can be disabled if possible.

Arguments ​

Name ​

  • Type: String

Name of custom-element Entry.

The name can be specified in PascalCaseor ParamCase.

e.g. CustomElementExample or custom-element-example.

Learn more about Entry.

Example ​

vue
<template>
  <div>
    <client-only>
      <CustomElementExample />
      <!-- or -->
      <custom-element-example/>
    </client-only>
  </div>
</template>

<script>
import Vue from 'vue';

Vue.config.ignoredElements = [
  'CustomElementExample',
  'custom-element-example'
];

export default {
  created () {
    this.$customElements.registerEntry('Example');
    // or
    this.$customElements.registerEntry('example');
  }
}
</script>