0

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. *

Larm
  • 187
  • 12
  • I'm really not sure how this one relates to React, nor why it had that the title + the tag. I'm leaving the related section but so far but this is more of a regular NPM package JS issue here. Making a quick search [gives this](https://stackoverflow.com/questions/47862591/vuejs-error-the-client-side-rendered-virtual-dom-tree-is-not-matching-server-re/67978474#67978474). Which is a really good starting point regarding the error. – kissu Mar 20 '22 at 16:58
  • 1
    @kissu apologies, it was due to my order of tagging. I tried to edit after it was posted to be nuxt.js first but it was too late. – Larm Mar 20 '22 at 16:59
  • 1
    Also, just to be sure, we're talking about [this photo editor](https://pixie.vebto.com/) here? Would be nice to have this one linked to know exactly about what we're talking. Asking because it's a paid thing from what it looks. – kissu Mar 20 '22 at 17:05

0 Answers0