Nuxt 3 Support

[Cersin]

Hello, Has anyone run the plugin innuxt 3? Is it possible?

[lperez22]

This is possible in Nuxt 3 I'm currently using like this in the Nuxt config I had to define it as a custom components

vue: {
    compilerOptions: {
      isCustomElement: (tag) => ['OtherComponents', 'QuillEditor'].includes(tag),
    },
    config: {
      devtools: DEV_TOOLS,
    },
  },

I created a client side only plugin

import { defineNuxtPlugin } from "#app";

import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.component('QuillEditor', QuillEditor);
})

Than I used it in a component

      <quill-editor
        theme="snow"
        :toolbar="toolBarOptions()"
      />

[lperez22]

Also just recently discovered how to pull in quill editor locally in Nuxt 3, in the script you have to dynamically import the component

<template>
  <quill-editor
    theme="snow"
    :toolbar="toolBarOptions()"
  />
</template>

import '@vueup/vue-quill/dist/vue-quill.snow.css';
export default {
 
  async setup() {
    if (!process.server) {
      const { QuillEditor } = await import('@vueup/vue-quill');
      const { vueApp } = useNuxtApp();
      vueApp.component('QuillEditor', QuillEditor);
    }
  },

}

[andysay]

Also just recently discovered how to pull in quill editor locally in Nuxt 3, in the script you have to dynamically import the component

<template>
  <quill-editor
    theme="snow"
    :toolbar="toolBarOptions()"
  />
</template>

import '@vueup/vue-quill/dist/vue-quill.snow.css';
export default {
 
  async setup() {
    if (!process.server) {
      const { QuillEditor } = await import('@vueup/vue-quill');
      const { vueApp } = useNuxtApp();
      vueApp.component('QuillEditor', QuillEditor);
    }
  },

}

how import module ? i want use html-button can you show some example?

[lperez22]

Also just recently discovered how to pull in quill editor locally in Nuxt 3, in the script you have to dynamically import the component

<template>
  <quill-editor
    theme="snow"
    :toolbar="toolBarOptions()"
  />
</template>

import '@vueup/vue-quill/dist/vue-quill.snow.css';
export default {
 
  async setup() {
    if (!process.server) {
      const { QuillEditor } = await import('@vueup/vue-quill');
      const { vueApp } = useNuxtApp();
      vueApp.component('QuillEditor', QuillEditor);
    }
  },

}

how import module ? i want use html-button can you show some example?

I'm able to import a module like so

<template>
  <quill-editor
    theme="snow"
    :modules="modules"
    :toolbar="toolBarOptions()"
  />
</template>


import '@vueup/vue-quill/dist/vue-quill.snow.css';
import htmlEditButton from 'quill-html-edit-button';

export default {
  async setup() {
    if (!process.server) {
      const { vueApp } = useNuxtApp();
      const { QuillEditor } = await import('@vueup/vue-quill');
      // only register the quill component once
      if (!vueApp._context.components.QuillEditor) vueApp.component('QuillEditor', QuillEditor);
    }
    const modules = {
      name: 'htmlButton',
      module: htmlEditButton,
    };
    return { modules };
  },

[lperez22]

Or if you wanted to dynamically import the file

  async setup() {
    if (!process.server) {
      const { vueApp } = useNuxtApp();
      const { QuillEditor } = await import('@vueup/vue-quill');
      // only register the quill component once
      if (!vueApp._context.components.QuillEditor) vueApp.component('QuillEditor', QuillEditor);
    }
    const { htmlEditButton } = await import('quill-html-edit-button');
    const modules = {
      name: 'htmlButton',
      module: htmlEditButton,
    };
    return { modules };
  },

[PMLS3]

I keep on getting the following: Invalid theme undefined. Did you register it and: quill Cannot import themes/snow. Are you sure it was registered?

plugins/quill-editor.client.ts

import { defineNuxtPlugin } from '#app' import { QuillEditor } from '@vueup/vue-quill' import '@vueup/vue-quill/dist/vue-quill.snow.css'; import '@vueup/vue-quill/dist/vue-quill.bubble.css'; export default defineNuxtPlugin(nuxtApp => { // Doing something with nuxtApp nuxtApp.vueApp.component('QuillEditor', QuillEditor); })

@Iperez22 are you using nuxt3 rc?

[lperez22]

I haven't updated to nuxt3 rc yet, im still on Beta and am waiting for the stable release so that I only have to fix things once and retest everything

[PMLS3]

I haven't updated to nuxt3 rc yet, im still on Beta and am waiting for the stable release so that I only have to fix things once and retest everything

Your foresight was better than mine :)

[chkb]

Hi @PMLS3 and @lperez22 Have you solved the Nuxt3 RC implementation yet.

I have done the following and it does not work yet.

Index page: <ClientOnly> <template #fallback> <!-- this will be rendered on server side --> <p>Loading editor...</p> </template> <Editor> <h2>Editor component has been loaded now...</h2> </Editor> </ClientOnly>

Editor Component:

<template> <slot></slot> <QuillEditor :content="content" theme="bubble"></QuillEditor> </template>

import '@vueup/vue-quill/dist/vue-quill.bubble.css' const { QuillEditor } = await import('@vueup/vue-quill'); const { vueApp } = useNuxtApp(); if (!vueApp._context.components.QuillEditor) vueApp.component('QuillEditor', QuillEditor); const content = ref('Test content in editor!')

Added the following config to nuxt.config.ts vue: { compilerOptions: { isCustomElement: (tag) => ['OtherComponents', 'QuillEditor'].includes(tag), }, },

I don't get any errors, but the editor is not rendered. any clues??

[ad-on-is]

@chkb Same here, even thou it used to work a few days ago, now it just refuses to render

[ProgrZZ]

I am the same, but when i check the console, it giving me this error

[lperez22]

Hey I just recently upgraded to nuxt rc-3, I am able to get this to work in plugin like so

plugins/quill.client.js

import { defineNuxtPlugin } from '#app';

import { QuillEditor } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('QuillEditor', QuillEditor);
});

Than in a component

<template>
  <div>
      <quill-editor theme="snow" />
  </div>
</template>

or if you dont need a plugin and just want it registered locally make a component like this

components/Test.vue

<template>
  <div>
    <quill-editor theme="snow" />
  </div>
</template>

<script>
import '@vueup/vue-quill/dist/vue-quill.snow.css';
export default {
  async setup() {
    if (!process.server) {
      const { QuillEditor } = await import('@vueup/vue-quill');
      const { vueApp } = useNuxtApp();
      if (!vueApp._context.components.QuillEditor) vueApp.component('QuillEditor', QuillEditor);
    }
  },
};
</script>

I was able to use the bubble theme as well, it looks like nothing renders but bubble doesnt have any menus it just might need some styling so that uses can see a box

[ikexing-cn]

[Vue warn]: Failed to resolve component: QuillEditor If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. Everything was fine except for this warning, but when I tried to add

vue: {
    compilerOptions: {
      isCustomElement: (tag) => 'QuillEditor' === tag
    }
  }

The editor component is then not rendered.

@lperez22 Is there any solution?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[wojtekpiskorz]

How woud you add an Image module to it aswell?

[klukiyan]

Hi @lperez22 , Would you mind also showing an example how to use it as plugin with a module (or modules) included. Thank you very very much

Hey I just recently upgraded to nuxt rc-3, I am able to get this to work in plugin like so

plugins/quill.client.js

import { defineNuxtPlugin } from '#app';

import { QuillEditor } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('QuillEditor', QuillEditor);
});

Than in a component

<template>
  <div>
      <quill-editor theme="snow" />
  </div>
</template>

[Vesely]

Wrap it to component:

<template>
  <QuillEditor theme="snow" />
</template>

<script setup>
import { QuillEditor } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';
</script>

And add .client to file name for example TextEditor.client.vue. It works for me.

[klukiyan]

Wrap it to component:

<template>
  <QuillEditor theme="snow" />
</template>

<script setup>
import { QuillEditor } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';
</script>

And add .client to file name for example TextEditor.client.vue. It works for me.

Hi, Did you manage to add modules with such setup? Table, html, markdown, etc...

[Vesely]

@klukiyan Hi, yes like this

<template>
  <QuillEditor theme="snow" :modules="modules" />
</template>

<script setup>
import { QuillEditor } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import MagicUrl from 'quill-magic-url';

const modules = [
  {
    name: 'quill-magic-url',
    module: MagicUrl,
  },
];
</script>

[klukiyan]

@Vesely Thank you. It shows typescript error on import. but otherwise it works. thank you very much

@klukiyan Hi, yes like this

[mahfuj10]

Hi guys !! i found very easy solution for that. First of all install quill npm i quill then paste the below code

<template> <div id="editor"></div> </template>

`

export default { setup() { onMounted(async () => { if (process.client) { const Quill = (await import("quill")).default; const quill = new Quill("#editor", { theme: "snow", modules: { toolbar: { container: [ ["image"], ["link", "video"], [{ header: [1, 2, 3, 4, 5, 6, false] }], ], }, }, }); } }); }, }; `

[ReaganM02]

It's my first time using WYSIWYG and it looks like this configuration works for me. I'll try to use this on my project and see if it works well.

Note: don't forget to wrap it with the <ClientOnly> api component.

<script setup lang="ts">
import { QuillEditor } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';
</script>
<template>
  <div>
    <ClientOnly>
      <QuillEditor theme="snow" />
    </ClientOnly>
  </div>
</template>

Nuxt: ^3.3.2

Working example. https://stackblitz.com/edit/nuxt-starter-ibc8jw?file=pages/index.vue

[klukiyan]

I plan to inject custom features, so I went even further. I wrapped it into a custom client side component and call it wherever needed.

Component

//components.TextEditor.client.vue

<script setup lang="ts">
import QuillMarkdown from 'quilljs-markdown'

const props = defineProps<{
  modelValue: any
  placeholder?: string
}>()
const emit = defineEmits(['update:modelValue'])
const switchValue = ref(false as boolean)

const modules = [
  {
    name: 'quilljs-markdown',
    module: QuillMarkdown,
  },
]
const text = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  },
})
</script>

<template>
  <span class="p-float-label mt-2">
    <div class="absolute right-2 top-2 text-green-400">
      <InputSwitch v-model="switchValue" />
    </div>
    <QuillEditor v-if="!switchValue" v-model:content="text" :placeholder="placeholder || ''" content-type="html" theme="snow" class="quil-editor" :modules="modules" />
    <QuillEditor v-else v-model:content="text" :placeholder="placeholder || ''" content-type="html" theme="snow" class="quil-editor" toolbar="full" :modules="modules" />
  </span>
</template>

<style>
div.ql-tooltip.ql-editing{
  left: inherit !important;
}
</style>

and call it like such:

<TextEditor v-model="longDescription" placeholder="Enter detailed project description here" />

[luisperez1050]

(!process.server)

Hey so I was able to load in a module in Nuxt 3, it was a little tricky but the main issue is that most of the modules will need to be client side loaded only because they rely on things like the window object, etc

So here are the steps to recap,

1. Need a client side plugin, or load in the component client side only

/plugins/quill.client.ts
import { defineNuxtPlugin } from "#app";
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.component('QuillEditor', QuillEditor);
})

2. Need to register the custom element

nuxt.config.ts
  vue: {
    compilerOptions: {
      isCustomElement: (tag: string) => ['QuillEditor'].includes(tag)
    },
  },

3. Here is a sample of how I was able to load in the module client side only, I'm using if(!process.server) inside of setup() to ensure it will only be done in client side, but will need to be asynchronous because we are dynamically importing a package, it would be much better to do this in the plugin, but I haven't found much information in the documentation on how to properly do this

/components/Editor.vue
<template>
  <div class="editor-wrapper">
    <ClientOnly>
      <quill-editor
        v-model:content="htmlEditor"
        :toolbar="toolBarOptions"
        :syntax="true"
        :options="{ height: 150 }"
        :modules="modules"
        contentType="html"
        theme="snow"
      />
    </ClientOnly>
  </div>
</template>

<script>

export default {
  name: 'app',
  async setup() {
    if (!process.server) {
      const { htmlEditButton } = await import("quill-html-edit-button");
      const modules = {
        name: 'htmlEditButton',  
        module: htmlEditButton, 
      };
      console.log('-=-=-=-=-=', htmlEditButton);

      return { modules };
    }
  },

[getshaun24]

It's my first time using WYSIWYG and it looks like this configuration works for me. I'll try to use this on my project and see if it works well.

Note: don't forget to wrap it with the <ClientOnly> api component.

<script setup lang="ts">
import { QuillEditor } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';
</script>
<template>
  <div>
    <ClientOnly>
      <QuillEditor theme="snow" />
    </ClientOnly>
  </div>
</template>

Nuxt: ^3.3.2

Working example. https://stackblitz.com/edit/nuxt-starter-ibc8jw?file=pages/index.vue

This worked well but I am unable to get the full toolbar from the modules to work with this implementation.

Does anyone have some guidance with this?

Thank you

[klukiyan]

It's my first time using WYSIWYG and it looks like this configuration works for me. I'll try to use this on my project and see if it works well. Note: don't forget to wrap it with the <ClientOnly> api component.

<script setup lang="ts">
import { QuillEditor } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';
</script>
<template>
  <div>
    <ClientOnly>
      <QuillEditor theme="snow" />
    </ClientOnly>
  </div>
</template>

Nuxt: ^3.3.2 Working example. https://stackblitz.com/edit/nuxt-starter-ibc8jw?file=pages/index.vue

This worked well but I am unable to get the full toolbar from the modules to work with this implementation.

Does anyone have some guidance with this?

Thank you

Hi, I was adding modules semi-successfully. Some installed well (like markdown module). Some didn't work (like tables modules) So I abandoned quil editor in favor of Joddit editor. That one had a more difficult initial setup. But it works so great. All tables work. Very easy to customize and copy pasting from Excel/MS Outlook keeps the formatting. It's really amazing if you want something advanced.