How to add a third-party custom element?

[jeremeevans]

In Nuxt v2, I was able to add third party custom element globally using plugins in the nuxt config:

plugins: [
{src: "~node_modules/path-to-component", ssr: false },
],

and then use it in my templates. What's the correct way to do that in v3?

For reference, the elements I am looking to import were built using LitElement, and they register themselves as custom elements using customElements.define...

[wobsoriano]

Related https://github.com/nuxt/framework/discussions/1214

[dammy001]

import { createVuetify } from 'vuetify'

export default defineNuxtPlugin((nuxtApp) => {
const vuetify = createVuetify(...) // Replaces new Vuetify(...)
nuxtApp.vueApp.use(vuetify)
});

[wobsoriano]

He's asking about how to ignore custom elements and not register plugins.

https://v3.vuejs.org/guide/migration/custom-elements-interop.html

[dammy001]

Oh that's true. Thanks man

[jeremeevans]

Where in the Nuxt 3 configuration can I access the compilerOptions?

**EDIT: Answered below by @danielroe **

[danielroe]

You can do it like this:

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
  build: {
    transpile: ['vaadin']
  },
  vue: {
    compilerOptions: {
      isCustomElement: tag => ['vaadin-checkbox'].includes(tag)
    }
  }
})

~/plugins/components.client.ts

import '@vaadin/vaadin-checkbox'
export default () => {}

[jeremeevans]

It doesn't look like compilterOptions is defined in the Nuxt config. I'm trying to find them... somewhere?? Not sure how to do it.

[danielroe]

Ensure you're on the latest Nuxt version: just merged in nuxt/framework#1452...

[jeremeevans]

Awesome, thank you! That worked.

[eMeRiKa13]

Hi,

I'm new to Nuxt, directly starting with the version 3 (why not!).

I'm trying to use this Vue3 component https://github.com/SortableJS/vue.draggable.next and found this discussion, how to add a third-party custom element.

So I created a plugin/components.client.ts file with

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
  build: {
    transpile: ['draggable']
  },
  vue: {
    compilerOptions: {
      isCustomElement: tag => ['draggable'].includes(tag)
    }
  }
})

And then in my page I use it (without adding nothing in the script setup):

<draggable
    tag="ul"
    :list="list"
    handle=".handle"
    item-key="id"
>
    <template #item="{ element, index }">
      <li>               
         ...
      </li> 
    </template>
</draggable>

But it's not working, and the console displays

[Vue warn]: Failed to resolve component: draggable
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

What I am missing? Thank you

[jeremeevans]

The Nuxt config part should go in nuxt.config.ts ... the components.client.ts should import the draggable component and export default, so all it should have is something like this:

import "draggable"
export default () => {}

[eMeRiKa13]

ho okay I see, I read this discussion but did it complementally wrong.

thank you for your answer