For recursive components, be sure to specify the name parameter

Question

I created a component like this

<template>
  <span class="my-icon">
    <img :src="iSrc" :alt="iname" />
  </span>
</template>

<script>
  export default {
    props: ['iname'],
    computed: {
      iSrc() {
        return require('../../../assets/images/' + this.iname + '.png')
      }
    }
  }
</script>

Using it inside the page, for example

<template>
    <div>
        <h3>Share it:</h3>
        <social-sharing inline-template network-tag="a">
          <div class="my-icons">
              <network network="facebook" class="fb-icon">
                <icon name="fb" />      
              </network>
          </div>
        </social-sharing>
    </div>
</template>

<script>
    import Icon from '~/comps/icon.vue'
    export default {
        components: {
            Icon
        }
    }
</script>

which throws a mistake

[Vue warn]: Unknown custom element: <icon> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

social-sharing is a vuejs plugin, if I use my icon component outside of social sharing, it works fine, but an error is generated inside it.

Answer 1

This is because you are using a special attribute inline-templatefor the component <social-sharing>.

In the documentation:

When a special inline-template attribute is present in a child component, the component will use its internal content as its template, rather than treating it as distributed content.

<social-sharing> , . <icon> <social-sharing>, , <icon>.

, <social-sharing> inline-template, , - <icon> :

// in your main.js file
import Icon from '~/comps/icon.vue'
Vue.component('Icon', Icon);

, <icon> , <social-sharing> .