Hot to implement the Quill Editor in Nuxt 3?

274 Views Asked by At

I did this in a project with VueJs, but now I want to make like in Nuxt 3, so please Can anyone help me?

I installed using npm install @vueup/vue-quill@latest quill-image-uploader

And now my code that I used in VueJs:

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

export default {
name: "Observacao",

data(){
    return{

        modules: {
            name: 'imageUploader',
            module: ImageUploader,
            options: {
                upload: file => {
                    return new Promise((resolve, reject) => {
                        const token = this.$store.getters.token;

                        const formData = new FormData();
                        formData.append("image", file);

                        //axios.post('/upload-image', formData)
                        fetch("http://localhost:3000/api/dashboard/observacao", {
                            method: "POST",
                            headers: { //content-type vai ser enviado pelo formulario devido o enctype="multipart/form-data" por ter fotos
                                //"Content-type": "multipart/form-data",
                                "auth-token": token
                            },
                            body: formData
                        })
                        .then((resp) => resp.json())
                        .then((res) => {
                            //console.log(res.url);

                            resolve(res.url);
                        })
                        .catch(err => {
                            reject("Upload failed");
                            console.error("Error:", err)
                        })
                    })
                }
            }
        }


    }
},

components: {
    QuillEditor
},

</script>

<template>
      <div id="quill">
         <QuillEditor v-model:content="texto" content-type="html" theme="snow" 
         toolbar="full" :modules="modules" />
      </div>
</template>

Hot to implement the Quill Editor in Nuxt 3?

0

There are 0 best solutions below