no-unregistered-components.md

pageClass	sidebarDepth	title	description
rule-details	0	vue/no-unregistered-components	disallow using components that are not registered inside templates

vue/no-unregistered-components

disallow using components that are not registered inside templates

📖 Rule Details

This rule reports components that haven't been registered and are being used in the template.

::: warning Note This rule cannot check globally registered components and components registered in mixins unless you add them as part of the ignored patterns. component, suspense and teleport are ignored by default. :::

<!-- ✓ GOOD -->
<template>
  <div>
    <h2>Lorem ipsum</h2>
    <the-modal>
      <component is="TheInput" />
      <component :is="'TheDropdown'" />
      <TheButton>CTA</TheButton>
    </the-modal>
  </div>
</template>

<script>
  import TheButton from 'components/TheButton.vue'
  import TheModal from 'components/TheModal.vue'
  import TheInput from 'components/TheInput.vue'
  import TheDropdown from 'components/TheDropdown.vue'

  export default {
    components: {
      TheButton,
      TheModal,
      TheInput,
      TheDropdown,
    }
  }
</script>

<!-- ✗ BAD -->
<template>
  <div>
    <h2>Lorem ipsum</h2>
    <TheModal />
  </div>
</template>

<script>
  export default {
    components: {

    }
  }
</script>

🔧 Options

{
  "vue/no-unregistered-components": ["error", {
    "ignorePatterns": []
  }]
}

• ignorePatterns Suppresses all errors if component name matches one or more patterns.

ignorePatterns: ['custom(\\-\\w+)+']

<!-- ✓ GOOD -->
<template>
  <div>
    <h2>Lorem ipsum</h2>
    <CustomComponent />
  </div>
</template>

<script>
  export default {
    components: {

    },
  }
</script>

<!-- ✗ BAD -->
<template>
  <div>
    <h2>Lorem ipsum</h2>
    <WarmButton />
  </div>
</template>

<script>
  export default {
    components: {

    },
  }
</script>

🔍 Implementation

• Rule source
• Test source