How to use with Nuxt3?

[dosstx]

I tried to set this up on Nuxt 3 v3.0 and I get the following error:

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

Here's my setup:

app.vue:

<template>
  <div>
    <ImgComparisonSlider>
      <!-- eslint-disable -->
      <img
        slot="first"
        style="width: 100%"
        src="https://img-comparison-slider.sneas.io/demo/images/before.webp"
      />
      <img
        slot="second"
        style="width: 100%"
        src="https://img-comparison-slider.sneas.io/demo/images/after.webp"
      />
      <!-- eslint-enable -->
    </ImgComparisonSlider>
  </div>
</template>

plugins/imgComparisonSlider.client.ts:

import { ImgComparisonSlider } from '@img-comparison-slider/vue';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.provide('ImgComparisonSlider', ImgComparisonSlider);
});

Any ideas on how to get it working in Nuxt3?

[sneas]

Hi, I’m not a Vue expert, but some time ago I made this component to work in Nuxt. Perhaps, this comment might help you with resolving your problem https://github.com/sneas/img-comparison-slider/issues/89#issuecomment-1185269127

Please let me know how it works.

[dosstx]

Thank you! This fixed the issue for me. I just copy and pasted your code sample in the latest Nuxt version and it worked flawlessly.. I did search for this issue beforehand but did not see it, so I am grateful for your quick response and help.