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?