add editorjs to nuxt 3 project

Question

I'm trying to add editorjs to a new nuxt 3 project. Following the documentation.

In ./pages/write.vue, I have:

<template>
  <div>
    writing
  </div>
  <div id="editorjs" ></div>
</template>

<script setup>

import EditorJS from '@editorjs/editorjs';
import Header from '@editorjs/header';
import Paragraph from '@editorjs/paragraph';
import List from '@editorjs/list';

const editor = new EditorJS({
  holder: 'editorjs',
  tools: { 
    header: Header, 
    list: List 
  }, 
});

editor.save().then((outputData) => {
  console.log('article data : ', outputData)
})

</script>

This causes an error :

500

Element is not defined

at ./node_modules/@editorjs/editorjs/dist/editorjs.umd.js:1:76
at Object. (./node_modules/@editorjs/editorjs/dist/editorjs.umd.js:1:192)
at Module._compile (node:internal/modules/cjs/loader:1376:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
at Module.load (node:internal/modules/cjs/loader:1207:32)
at Module._load (node:internal/modules/cjs/loader:1023:12)
at cjsLoader (node:internal/modules/esm/translators:345:17)
at ModuleWrap. (node:internal/modules/esm/translators:294:7)
at ModuleJob.run (node:internal/modules/esm/module_job:218:25)

No clue to even start looking for the solution (I have seen this question was asked for Nuxt 2).

Answer 1

Since Nuxt renders pages from the server-side on initial page load, most browser-based API's (like Element) are not available. To make this work, you could put your code inside an if check like this:

if (process.client) {
    const editor...
}

Another way to make your whole component only render on the client-side is to rename it to write.client.vue.