Nuxt•7mo ago

Using Web Components with Nuxt 3.8.2

We have an enterprise-level application using two frontends. One uses Nuxt, which is a single page at the moment, and the other uses .net. Our goal is to slowly transition this large application over to Nuxt, but we have very small phases we have to do as it is a very active, and large, application. Right now we want to take the menu we built in Nuxt and use it on the Other front-end. We ran into an issue where Vue Web Components aren't working with Nuxt. One of the developers got a demo working using just Vue, but once he tried it in Nuxt it didn't work anymore. He looked into the Nuxt Custom Elements plugin, but it seems it doesn't work with Nuxt 3 at the moment. Has anyone successfully done anything like this in Nuxt or any ideas on how we could accomplish this? Right now our only working idea of to maintain two different frontends, which we both hate the idea of.

4 Replies

pyplacca•7mo ago

This should help you get web components working in nuxt. https://vuejs.org/guide/extras/web-components.html

Vue.js

Vue.js - The Progressive JavaScript Framework

pyplacca•7mo ago

You’d want to tell nuxt which components it should recognize as custom web components via the vue.compilerOptions option in your nuxt.config.ts file

dwol•7mo ago

add this into your nuxt config:

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

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

pyplacca•7mo ago

Here’s an example of how I got the swiper web components working in my app

Gaming

Programming

Using Web Components with Nuxt 3.8.2