Ошибка при использовании v-bind "is" в Dynamic Vue 3 Componet в Nuxt 3 - не удалось разрешить компонент

Question

Я получаю сообщение об ошибке (см. Ниже) при попытке предоставить атрибут «is» внутри объекта в v-bind для динамического компонента. Я использую Nuxt3.

Ошибка: [предупреждение Vue]: не удалось разрешить компонент: компонент Если это собственный настраиваемый элемент, не забудьте исключить его из разрешения компонента через compilerOptions.isCustomElement.{is: 'AppLink', to: 'myRoute'} Недопустимое значение, используемое в качестве слабого ключа карты

Пример использования в компоненте:

      <component v-bind="{ is: 'AppLink', to: 'myRoute' }">
    <slot></slot>
</component>

Вот как выглядит компонент AppLink:

      <template>
    <nuxt-link>
        <slot></slot>
    </nuxt-link>
</template>

<script>
export default {
    name: 'AppLink'
};

Если я сделаю это так, все будет работать, как ожидалось, без ошибок:

      <component is="AppLink" to="myRoute" }">
    <slot></slot>
</component>

Любые мысли, интерпретирующие ошибку, были бы замечательными. Спасибо.

Answer 1

Это может произойти, если вы не установите глобальные компоненты (не рекомендуется).

        import { defineNuxtConfig } from 'nuxt'

  export default defineNuxtConfig({
    components: {
      global: true,
      dirs: ['~/components']
    },
  })

См. документы по динамическим компонентам об этом.