vue3 isCustomElement is detecting component as a vue component

Question

I am trying to get a webcomponent working with vitejs.

component I am trying to use: https://www.webcomponents.org/element/input-knob

I did as describe in the docs.

install and setup @vitejs/plugin-vue

https://github.com/vitejs/vite/tree/main/packages/plugin-vue#vitejsplugin-vue-

initiate the customelement in config. ( I also tried simply putting the custom element in main.js https://github.com/vitejs/vite/issues/1312

vite.config.js

import { VitePWA } from 'vite-plugin-pwa'
import vue from '@vitejs/plugin-vue'
export default {
  plugins: [
    VitePWA(),
    vue({
      template: {
        compilerOptions: {
          isCustomElement: tag => tag === 'input-knob'
        }
      }
    })
  ]
}

still getting the same warning :frowning:

app.config.isCustomElement = tag => tag.startsWith('input-')

console.log(app.config.isCustomElement('input-knob'))

main.js

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

const app = createApp(App);

app.config.isCustomElement = tag => tag.startsWith('input-')

console.log(app.config.isCustomElement('input-knob'))
app.mount('#app')

[Vue warn]: Failed to resolve component: input-knob

the log returns true, so I am not sure where the problem actually is.

Answer 1

Problem was vite version. Pushing it to vite2 fixes this.

"vite": "^2.0.5"