Adding Quill Editor in Laravel 9 using Vite

In this tutorial, we will show you how to add Quill editor in a Laravel project using Vite.

A Vite is a modern build tool for frontend applications that offers a very fast development environment by combining the CSS and JavaScript files into assets to make them ready for production use.

We assume that you already have a Laravel project with Vite build tool:

1. Install Quill editor using the following command on your terminal:

npm install [email protected]

2. Import quill.snow.css theme to /resources/sass/app.scss:

@import  '../../node_modules/quill/dist/quill.snow.css';

3. Import quill.js to /resources/js/app.js:

import '../../node_modules/quill/dist/quill';

4. Add editor to your blade file where you want it to appear:
5. Add the following script to to the body of the blade file:

<script>    
    document.addEventListener("DOMContentLoaded", function(event) {    
        var toolbarOptions = [
        ['bold', 'italic', 'underline', 'strike'],        
        ['blockquote', 'code-block'],

        [{ 'header': 1 }, { 'header': 2 }],               
        [{ 'list': 'ordered'}, { 'list': 'bullet' }],
        [{ 'script': 'sub'}, { 'script': 'super' }],      
        [{ 'indent': '-1'}, { 'indent': '+1' }],          
        [{ 'direction': 'rtl' }],                         

        [{ 'size': ['small', false, 'large', 'huge'] }],  
        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

        [{ 'color': [] }, { 'background': [] }], 
        [{ 'font': [] }],
        [{ 'align': [] }],

        ['clean']           
        ];

        var quill = new Quill('#editor', {
                        modules: {
                        syntax: false,
                        toolbar: toolbarOptions
                        },
                        theme: 'snow'
                    });
                    
        window.quill = quill

    });
</script>

Next, run your application to see the Quill editor on your page: