Vue standalone component getting Unknown custom element on custom tags-CodePudding

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

CodePudding user response：

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