Vue 3 - "Failed to resolve component" with child component

Question

I have this SocialNetworks.vue component

<template>
  <div class="socialNetworks">
    <SocialLink to="https://twitter.com/" icon="twitter.svg" name="twitter" />
    <SocialLink
      to="https://facebook.com/"
      icon="facebook.svg"
      name="facebook"
    />
    <SocialLink to="https://github.com/" icon="github.svg" name="github" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { SocialLink } from '@/components/atoms'
export default defineComponent({
  component: { SocialLink }
})
</script>

<style lang="scss" scoped>
.socialNetworks {
  display: grid;
  grid-gap: 1rem;
}
</style>

That uses this child SocialLink.vue component

<template>
  <a class="socialLink" :href="to">
    <img src="@/assets/images/icons/search.svg" :alt="name" />
  </a>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    name: { Type: String, required: true },
    icon: { Type: String, required: true },
    to: { Type: String, required: true }
  },
  computed: {
    iconPath(): string {
      return require(`@/assets/images/icons/${this.icon}`)
    }
  }
})
</script>

<style lang="scss" scoped>
.socialLink {
  background-color: #ff895f;
  width: 47px;
  height: 47px;
  border-radius: 5rem;
  display: grid;
  justify-items: center;
  align-items: center;
  transition: transform 0.2s linear;
  &:hover {
    transform: scale(1.1);
  }
  img {
    width: 23px;
    height: 23px;
  }
}
</style>

And I'm using the SocialNetworks.vue component in this SitePresentation.vue

<template>
  <a class="socialLink" :href="to">
    <img src="@/assets/images/icons/search.svg" :alt="name" />
  </a>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    name: { Type: String, required: true },
    icon: { Type: String, required: true },
    to: { Type: String, required: true }
  },
  computed: {
    iconPath(): string {
      return require(`@/assets/images/icons/${this.icon}`)
    }
  }
})
</script>

<style lang="scss" scoped>
.socialLink {
  background-color: #ff895f;
  width: 47px;
  height: 47px;
  border-radius: 5rem;
  display: grid;
  justify-items: center;
  align-items: center;
  transition: transform 0.2s linear;
  &:hover {
    transform: scale(1.1);
  }
  img {
    width: 23px;
    height: 23px;
  }
}
</style>

Everything looks good to me, but I keep receiving this in my console

[Vue warn]: Failed to resolve component: SocialLink
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
  at <SocialNetworks> 
  at <SitePresentation> 
  at <SiteContainer class="homeTemplate" > 
  at <HomeTemplate> 
  at <App>

The image in the SitePresentation.vue works just fine, the svg's are ok and the pathes of the imports are correct as far from I can see. I tried to not call the require, call one of the svg hard-coded just like I'm doing in the presentation component. I think the problem might be in the SocialLink.vue component, but I'm not quite sure of what exactly is the problem There's something odd in my code or I'm ignoring some detail?

Answer 1

Your component property should be components!

export default defineComponent({
  components: { SocialLink }
})

https://vuejs.org/api/options-misc.html#components

Answer 2

Use:

import SocialLink from '@/path/to/SocialLink.vue'

Instead of:

import { SocialLink } from '@/components/atoms'