'Vue standalone component getting Unknown custom element on custom tags

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

vue.js


Solution 1:[1]

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

Solution 2:[2]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2

Related Questions