Nuxt•7mo ago

Any guideline on using Lit based web components in Nuxt project?

I'm new to Nuxt, just started to use today. I've some webcomponents coming from node_modules and some under web components folder. Where should I mention that these typescript assets must be converted and shipped to "dist" directory? Currently CustomElements.get('my-web-component') returns undefined as I don't see the corresponding file not being listed source panel of Chrome.

2 Replies

dwol•7mo ago

just saw this sorry, you need to set a vue config in the nuxt.config.ts

vite: {
    vue: {
      template: {
        compilerOptions: {
          isCustomElement: tag => tag.includes('-')
        }
      }
    }
  },

vite: {
    vue: {
      template: {
        compilerOptions: {
          isCustomElement: tag => tag.includes('-')
        }
      }
    }
  },

dwol•7mo ago

https://vuejs.org/guide/extras/web-components#example-vite-config

Vue.js

Vue.js - The Progressive JavaScript Framework

Gaming

Programming

Any guideline on using Lit based web components in Nuxt project?