Search code examples
laravelwebpacklaravel-mixquill

Import quill.js into Laravel using Mix/Webpack

At the time of my original implementation of this, I am using Laravel 5.8, but as far as I know, this is still relevant and Larvel 7.x is out now. I'm trying to import a new javascript library into my Laravel 5.8 application using Mix. Specifically, the quill.js library.

Solution

  • Here are the steps I took to install quill and make it globally accessible in the application.

    1

    Install quill via npm

    npm install quill --save-dev

    2

    Create a new file /resources/js/quill.js

    3

    In the quill.js file, I included the code that the quill documentation suggests: https://quilljs.com/guides/adding-quill-to-your-build-pipeline/

    import Quill from 'quill/core';

import Toolbar from 'quill/modules/toolbar';
import Snow from 'quill/themes/snow';

import Bold from 'quill/formats/bold';
import Italic from 'quill/formats/italic';
import Header from 'quill/formats/header';


Quill.register({
  'modules/toolbar': Toolbar,
  'themes/snow': Snow,
  'formats/bold': Bold,
  'formats/italic': Italic,
  'formats/header': Header
});


export default Quill;

    4

    In my app.js file, I included the quill.js file and assigned it to the global scope

    require('./quill.js');

window.Quill = require('Quill');

    5

    Import the quill css in /resources/sass/app.scss

    @import '~quill/dist/quill.core.css';

    And for your theme

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

    6

    Run npm run dev