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.
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
If you don't necessarily want to import specific Quill components and just want to emulate the behaviour from CDN, you could just:
Install Quill
npm i quill
In your resources/js/app.js
import Quill from 'Quill';
Attach Quill on your elements
new Quill('.quill-editor', {});
Related
I was successfully using font-awesome in a laravel-vue project with laravel-mix and after migrating from laravel-mix to vite, there was no noticeable issue with icons. Fast-forward to a few weeks later, and icons are no longer showing, and there're no errors, icons are visible in dev tools under elements and are also properly built from what I can see vue-dev tools.
What can I do to resolve this?
This are excerpts of my code:
<template>
...
<font-awesome-icon icon="bell"></font-awesome-icon>
</template>
<script setup>
...
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome'
import { library } from '#fortawesome/fontawesome-svg-core'
import { faBell } from '#fortawesome/free-solid-svg-icons'
library.add(faBell)
</script>
Devtools screenshots:
When I create a fresh vue-cli project via this command
vue create hello-word
and this command to install vuetify
vue add vuetify
Then I saw my git changes like this
Two new dependencies have been installed in package.json.
vue-cli-plugin-vuetify
vuetify-loader
At first glance, I thought vue.config.js has specified using these two, but it's content only have these code.
module.exports = {
"transpileDependencies": [
"vuetify"
]
}
So, how does vue-cli know I've installed this new vuetify loader?
Does it automatically pick those up?
After running vue add vuetify choose Vuetify 3 if you are using Vue 3:
vuetify-loader is a treeshaking plugin for Webpack. It gets installed automatically when you install Vuetify using "vue add vuetify".
So, vuetify-loader is used by Webpack for treeshaking the Vuetify components to only include the ones that you imported in your app. This way Webpack should be able to lower your build size by importing only the required components, and not all the Vuetify components.
See Vuetify Treeshaking
And this is the vuetify-loader project on Github
I have installed argon design system using npm. And inside the head tag, I have added links from the documentation. But I want to extract it from node modules using mix. And run in webpack so that it renders styles. Please, someone, help with a detailed answer.
import the argon js file (in bootstrap.js for example if you're using the default laravel boilerplate) after popper, jquery and bootstrap:
require("argon-design-system-free/assets/js/argon-design-system");
and the css file (in app.scss if you're using it):
#import "~argon-design-system-free/assets/css/argon-design-system.css";
if you want the nucleo icons import then before the css file:
#import "~argon-design-system-free/assets/css/nucleo-icons.css";
In React, in order to style a component, I simply import the style file that sits in the same directory as the component, e.g., import './style.scss'. It's simple and easy, no problems there.
However, I can't seem to make this work in Preact. The style file just never get applied, even after following the docs and of course installing node-sass and sass-loader. I see plenty of examples out there using CSS modules and a few with CSS in JS, but I'd like to do a bog-standard import if possible.
Thanks in advance for any help you can provide.
Apparently the solution was to disable CSS modules altogether by installing css-loader and adding the following to my preact.config.js:
const css = helpers.getLoadersByName(config, 'css-loader')[0];
css.loader.options.modules = false;
I am attempting to import fa-carot-down, but I don't want to import the whole library. I need a single icon, but I'm not sure how to include it.
I'm using Webpack and SASS, if that makes any difference.
Alternatively, any means to get a carot icon for my dropdown would be appreciated.
You can try IcoMoon and Fontello as it helps you create your own library of fonts.
Furthur you can bundle it together with webpack to import the necessary icons
Now svg's are supported in IcoMoon