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

tony19 · Accepted Answer · 2022-07-15 20:15:38Z

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.

thedanotto · Accepted Answer · 2018-06-27 01:36:31Z

-3

I simply forgot to close a script tag in my component.

answered Jun 27, 2018 at 1:36

thedanotto

7,3855 gold badges49 silver badges46 bronze badges

2 Comments

thanksd Over a year ago

This should be a comment. While the "Unknown custom element" warning could be caused by an unclosed <script> tag, that's not the issue with this post.

thedanotto Over a year ago

Thanks for your opinion. I believe it should be an answer because it solved my problem after a long time of researching.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related