Famabara means... nothing :)

I wanted to come up with a pleasant-sounding and at the same time meaningless word.
There is only one Famabara in the world and you are now on it.

I have a friend who believes in the moon landing conspiracy - you know, one of those people who think the Americans never actually went to the Moon.

He’s convinced the whole thing was staged, masterfully filmed by movie directors. Arguing with him is almost pointless - he says every photo is fake. The fact that even Soviet scientists never questioned the authenticity of the American Moon landing doesn’t matter to him.

But there’s one argument that made him stop and think. No, I didn’t manage to change his mind, but at least I got him to shut up for a while - confused him, so to speak.

The argument went like this: "So what, they faked all their Moon landings?"
Funny thing is, he didn’t even know that the Americans went to the Moon not once, but several times.

Here’s the list of all Moon missions:
Apollo 11 - July 16, 1969
Apollo 12 - November 14, 1969
Apollo 14 - January 31, 1971
Apollo 15 - July 26, 1971
Apollo 16 - April 16, 1972
Apollo 17 - December 7, 1972

So according to the "logic" of Moon landing deniers, the Americans didn’t fake it just once - they supposedly faked it six times, along with all the photos, videos, and even the Moon rocks they brought back.

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!