I have this SocialNetworks.vue component

<template>
  <div >
    <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  :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  :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  > 
  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?

CodePudding user response：

Use:

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

Instead of:

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

CodePudding user response：

Your component property should be components!

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

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