Vue standalone component getting Unknown custom element on custom tags

Question

I have a template in a standalone Vue component that is inserted into a liquid file. In order to avoid styling conflicts I've decided to create custom tags, as in my case an iFrame does not work.

These tags ARE NOT components, they are simply replacements for div span and other standard HTML tags that carry unique styling that I am trying to avoid. Also I've tried all: unset and similar CSS hacks to no effect. I need these tags.

However, I'm now getting the following warning: Unknown custom element: <freshie-div> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

As these are not components, I'm not real sure how to get rid of this warning. The warning is important to be removed because customers will see the warning and lose their minds.

Here is some of the condensed code:

  template: 
`
<freshie-div :style="divStyle">
  <freshie-div :style="buttonContainer" v-if="displayLauncherButton">
    <freshie-button 
      :style="buttonStyle"
      @click="openCreditPanel()"
    >\${ returnLauncherText }</freshie-button>
  </freshie-div>
 `

Nothing especially crazy, other than the custom tags.

EDIT: I am creating my component with Vue.component('freshie', { instead of Vue.createApp({

And it seems like because of that this isn't working:

  components: {
    'freshie-div': 'div',
    'freshie-span': 'span',
    'freshie-button': 'button'
  },

I'm getting the following error: Invalid Component definition: button

tony19 · Accepted Answer · 2022-04-22 00:21:28Z

2

Vue 3

You could register those components as aliases to the native elements:

const app = Vue.createApp({
  template: `<freshie/>`
})

app.component('freshie', {
  components: {
    'freshie-div': 'div', 👈
    'freshie-h1': 'h1', 👈
    'freshie-button': 'button' 👈
  },
  template: `<freshie-div>
    <freshie-h1>Hi there</freshie-h1>
    <freshie-button @click="onClick">Click</freshie-button>
  </freshie-div>`,
  methods: {
    onClick() {
      alert('hello world')
    }
  }
})

app.mount('#app')

demo 1

Vue 2

In Vue 2, the alias must be done with a template option:

Vue.component('freshie', {
  components: {
    'freshie-div': { template: `<div v-on="$listeners" v-bind="$attrs"><slot/></div>` }, 👈
    'freshie-h1': { template: `<h1 v-on="$listeners" v-bind="$attrs"><slot/></h1>` }, 👈
    'freshie-button': { template: `<button v-on="$listeners" v-bind="$attrs"><slot/></button>` }, 👈
  },
  template: `<freshie-div>
    <freshie-h1>Hi there</freshie-h1>
    <freshie-button @click="onClick">Click</freshie-button>
  </freshie-div>`,
  methods: {
    onClick() {
      alert('hello world')
    }
  }
})
  
new Vue({
  template: `<freshie/>`
}).$mount('#app')

demo 2

edited Apr 22, 2022 at 0:21

answered Apr 21, 2022 at 21:12

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tony19 Over a year ago

Alternatively, you could avoid these aliases by using a Custom Element with Shadow DOM, which prevents external style effects.

Onki Hara · Accepted Answer · 2022-04-21 21:03:09Z

0

You can try to add the v-pre directive to the custom tags as pointed out here: Vue ignore custom component tag

But be aware that this prevents rendering of all vue elements in the custom tags: https://vuejs.org/api/built-in-directives.html#v-pre

Unfortunately I see no way to get rid of the warning without using regular tags or real vue components.

edited Apr 21, 2022 at 21:03

answered Apr 21, 2022 at 20:52

Onki Hara

3601 silver badge11 bronze badges

Collectives™ on Stack Overflow

Vue standalone component getting Unknown custom element on custom tags

2 Answers 2

Vue 3

Vue 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Vue 3

Vue 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related