JS.VUE.NO.UNDEF.COMPONENTS

Undefined component

This rule reports components that are used in the <template>, but that are not defined in the <script setup> or the Options API's components section.

Undefined components will be resolved from globally registered components. However, if you are not using global components, you can use this rule to prevent run-time errors.

This rule cannot check globally registered components and components registered in mixins unless you add them as part of the ignored patterns.

{'vue/no-undef-components': ['error']}

Copy

<script setup>
import Foo from './Foo.vue'
</script>

<template>
  <!-- GOOD -->
  <Foo />

  <!-- BAD -->
  <Bar />
</template>

{'vue/no-undef-components': ['error']}

Copy

<!-- 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>

{'vue/no-undef-components': ['error']}

Copy

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

<script>
export default {
  components: {

  }
}
</script>

Options

Copy

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

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

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

{'vue/no-undef-components': ['error', { 'ignorePatterns': ['custom(\-\w+)+'] }]}

Copy

<script setup>
</script>

<template>
  <!-- GOOD -->
  <CustomComponent />

  <!-- BAD -->
  <Bar />
</template>

{'vue/no-undef-components': ['error', { 'ignorePatterns': ['custom(\-\w+)+'] }]}

Copy

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

<script>
  export default {
    components: {

    },
  }
</script>

{'vue/no-undef-components': ['error', { 'ignorePatterns': ['custom(\-\w+)+'] }]}

Copy

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

<script>
  export default {
    components: {

    },
  }
</script>