"Unknown custom element" warning inside a component tag, but not outside of it

Question

I have 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 a page like this:

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

But it's throwing this error:

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

The <social-sharing> component is from a Vue plugin. If I use my <icon> component outside the <social-sharing> tag it works fine, but inside it throws the error.

Answer 1

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

From the documentation:

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

Everything inside the <social-sharing> tag is being treated as if it were the template definition for that component. And, since your <icon> component is being registered outside the <social-sharing> component's scope, it doesn't know what to do with the <icon> tag.

Since it looks like the <social-sharing> component is dependant on an inline-template definition, the only thing I can think to do is register the <icon> component globally:

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

Then, since the <icon> component will be in the global scope, the <social-sharing> component will have a reference to it.