I am trying to get a webponent working with vitejs.

ponent I am trying to use:

I did as describe in the docs.

install and setup @vitejs/plugin-vue

initiate the customelement in config. ( I also tried simply putting the custom element in main.js

vite.config.js

import { VitePWA } from 'vite-plugin-pwa'
import vue from '@vitejs/plugin-vue'
export default {
  plugins: [
    VitePWA(),
    vue({
      template: {
        pilerOptions: {
          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 ponent: input-knob

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

I am trying to get a webponent working with vitejs.

ponent I am trying to use: https://www.webponents/element/input-knob

I did as describe in the docs.

install and setup @vitejs/plugin-vue

https://github./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./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: {
        pilerOptions: {
          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 ponent: input-knob

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

• javascript
• vue-ponent
• web-ponent
• vuejs3
• vite

Share Improve this question Follow asked Feb 26, 2021 at 11:28 Fanna1119Fanna1119 2,32655 gold badges2929 silver badges3232 bronze badges 3

• Got also some problems webponents but with webpack. Which vue version do you use? Did you log also the vite part? pilerOptions: { isCustomElement: tag => tag === 'input-knob' } – ste-xx Commented Feb 26, 2021 at 18:13
• It is the latest version. (i did not add the vite config) js "dependencies": { "@vitejs/plugin-vue": "^1.1.4", "@vueuse/core": "^4.2.2", "vue": "^3.0.4" }, "devDependencies": { "@vue/piler-sfc": "^3.0.4", "vite": "^1.0.0-rc.13", "vite-plugin-pwa": "^0.5.4" } } – Fanna1119 Commented Feb 27, 2021 at 14:41
• How do I log vite? – Fanna1119 Commented Feb 27, 2021 at 14:45

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 0

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

"vite": "^2.0.5"