I'm attempting to integrate Pixie Editor with Nuxt. They give the following example for React initalisation:

import React, {useEffect} from "react";
import { Pixie } from "pixie";

export function EditorDemo() {
  useEffect(() => {
    Pixie.init({
      selector: "#container",
      baseUrl: "pixie",
      image: "pixie/images/samples/sample1.jpg",
    }).then((instance) => {
      // editor is fully loaded!
      console.log(instance);
    });
  }, []);
  return <div id="container" />;
}

My attempt for Nuxt hasn't been successful, and I'm essentially still sitting at:

import Vue from 'vue'
import { Pixie } from 'pixie'

Vue.component('PixieEditor', Pixie)

Inside my Nuxt template:

<template>
  <client-only>
    <PixieEditor/>
  </client-only>
</template>

Errors:

TypeError: class constructors must be invoked with 'new'
    VueJS 5
    render index.vue:11
    VueJS 57
    NuxtJS 2
    Babel 12
    NuxtJS 11
client.js:102
[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

* I apologise for the lack of code. I could've added a bunch of pointless code, but I'm not sure where to start. *