Quill and Vue 3 Typescript - quill Cannot import themes/snow. Are you sure it was registered?

user_331747 0
Viewed 144

I am trying to get started with the Quill rich text editor in my Vue 3 Typescript project. I have added the following lines to register the QuillEditor component:

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

<snip>
export default defineComponent({
  name: "dev-ask",
  components: {
    QuillEditor,
  },
<snip>

...and I'm using my component in my page:

<QuillEditor theme="snow" />

However, when I view the page I get an error in the console saying:

quill Cannot import themes/snow. Are you sure it was registered?

The page never renders properly and that's the primary error message I see. What am I doing wrong here? I'm following the usage directions I found here. Thoughts?

quill vuejs3 typescript
2 Answers

The module @vueup/vue-quill still appears to be in early development. I wasn't able to get it working through their guide either. However, I played around with various methods of importing and I was able to get a working scenario in the Vue SFC Playground.

See working example here.

<script setup>
import { ref } from 'vue'
import { QuillEditor } from "@vueup/vue-quill"

const msg = ref('Hello World!!!!')
</script>

<template>
  <quill-editor v-model:content="msg" content-type="html" theme="snow"></quill-editor>
  <p>Result: <code>{{ msg }}</code></p>
</template>

<style>
@import "https://unpkg.com/@vueup/vue-quill@1.0.0-beta.9/dist/vue-quill.snow.css";
</style>

The main difference is that instead of importing the CSS in the script tag, it's being imported in the style tag. This might just be a side-effect of the SFC Playground and you may be able to import it with just a <style src="@vueup/vue-quill/dist/vue-quill.snow.css"></style> in the component file.

It would also seem that the default "latest" version of @vueup/vue-quill is currently still 1.0.0-alpha.1, even though a more recent beta version is available (currently 1.0.0-beta.9), which I've opted to use in the linked example above.

sirlancelot_510210

I had the same problem after installing the package with:

npm install @vueup/vue-quill

Solution was to use:

npm install @vueup/vue-quill@beta --save
user_101542790
Related