Import quill.js into Laravel using Mix/Webpack

Question

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.

Answer 1

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