Skip to content

Latest commit

 

History

History
145 lines (112 loc) · 2.86 KB

no-unregistered-components.md

File metadata and controls

145 lines (112 loc) · 2.86 KB
pageClass sidebarDepth title description since
rule-details
0
vue/no-unregistered-components
disallow using components that are not registered inside templates
v7.0.0

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>

🚀 Version

This rule was introduced in eslint-plugin-vue v7.0.0

🔍 Implementation