Humans have been flying to space since 1961 - that's over 60 years now. These days, we even have tourist spaceflights. In sci-fi movies, people travel between planets, stars, and even galaxies.

But what is space from the perspective of aviation and astronautics? Technically, it starts somewhere between 100 and 122 kilometers above Earth's surface. The range exists because different organizations define the boundary of space slightly differently.

Is 120 kilometers really that high? The average diameter of our planet is 12,742 kilometers - quite a lot. Below, I drew a simple picture to show what a spaceflight looks like to scale:

See that tiny red dot? That’s our trip to "outer space". Not exactly impressive, right? For comparison, the International Space Station orbits at an altitude of about 418.2 km - on this scale, its point would only be a couple of pixels higher.

Human technology is still in its infancy. Legally, we can say we fly to space - but in reality, it looks more like what you see above. As for interplanetary travel, so far, only our robots have made the journey.

If you try to use Quill Editor with Nuxt 3 when rendering a page in SSR you will get this error:
That means NodeJS doesn't have the global variable 'document'. Because SSR rendering is executed in
a NodeJS environment, not a browser.

The sad fact: <client-only> won't help with this problem. The problem with quill's code is that during import, it assumes it's being executed in the browser. I hope you remember that the code imported from the module is not just imported, but executed, i.e. the authors of Quill wrote it so that the 'document' object is immediately accessed there. Very bad.

One solution is to disable SSR, but its an awful solution. But the second solution is to use dynamic JS imports.

My <script lang="ts" setup> in QuillEditor.vue in Nuxt 3 project:

import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
// import Quill from 'quill'; // SSR problem with 'document', need to use dynamic import
import type Quill from 'quill';

const elemForQuillEditor = ref<HTMLDivElement|null>(null);

let editor: null|Quill = null; // Do not store in ref() - it causes bugs!

// ...

async function createQuillAndSetListeners() {
  const Quill = (await import('quill')).default; // This is most important thing - usage of JS dynamic import

  if (!elemForQuillEditor.value) return;
  editor = new Quill(elemForQuillEditor.value, {
    theme: 'snow',
    modules: {
      history: {
        delay: 2000,
        maxStack: 500,
        userOnly: true,
      },
      toolbar: {
        container: [
          ['bold', 'italic', 'underline', 'strike'],
          ['link'],
          [{ list: 'ordered' }, { list: 'bullet' }],
          [{ script: 'sub' }, { script: 'super' }],
          [{ header: [1, 2, 3, 4, 5, 6, false] }],
          [{ color: [] }, { background: [] }],
          ['clean'],
          ['undo', 'redo'],
        ],
        handlers: {
          undo() {
            editor?.history.undo();
          },
          redo() {
            editor?.history.redo();
          },
        },
      },
    },
    placeholder: props.placeholder,
  });
  
  editor.on('text-change', () => {
    if (!editor) return;
    // ... my other code
  });
}

// ...

onMounted(createQuillAndSetListeners);

Now your Quill editor will work in Nuxt 3 even during SSR!