I want to install Vue 3 into a Laravel 8 project, but I don't want to use something like laravel/ui because it adds Bootstrap and a bunch of other stuff I don't want.
I tried npm i vue#next, and it installs Vue 3, but when I try to do import { createApp } from 'vue'; in app.js, etc., I get a bunch of Webpack errors on npm run dev with Laravel Mix ("laravel-mix": "^6.0.6", in package.json).
This is the webpack.mix.js file I'm using:
const mix = require('laravel-mix');
mix
.extract(['vue'])
.js('resources/js/app.js', 'public/js/')
.vue()
.version();
And I get this error when I run npm run dev:
[webpack-cli] Error: Cannot find module 'webpack/lib/rules/DescriptionDataMatcherRulePlugin'
(Stack trace here.)
Does anyone know how to simply install Vue 3 (without a bunch of additional scaffolding) in Laravel 8? Thank you.
After searching more, I found another SO post with essentially the same question and an answer that worked.
Instead of just doing npm i vue#next, I had to do the following instead:
npm i -D laravel-mix#next vue#next #vue/compiler-sfc vue-loader#next
After that, everything worked as expected.
Here's the SO post I referenced: Install vue 3.0 in laravel
I'm trying to add Font Awesome to newly installed Laravel 8 Jetstream with Inertia but receiving the following error
Unknown error from PostCSS plugin. Your current PostCSS version is 8.2.4, but postcss-import uses 7.0.35. Perhaps this is the source of the error below.
Error: Failed to find '~#fortawesome/fontawesome-free/scss/brands'
App.css
#import 'tailwindcss/base';
#import 'tailwindcss/components';
#import 'tailwindcss/utilities';
#import '~#fortawesome/fontawesome-free/scss/brands';
#import '~#fortawesome/fontawesome-free/scss/regular';
#import '~#fortawesome/fontawesome-free/scss/solid';
#import '~#fortawesome/fontawesome-free/scss/fontawesome';
Webpack.mix
mix.js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
])
.webpackConfig(require('./webpack.config'));
if (mix.inProduction()) {
mix.version();
}
Webpack config
const path = require('path');
module.exports = {
resolve: {
alias: {
'#': path.resolve('resources/js'),
},
},
};
First, set up
webpack.mix.js as follows:
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
])
.sass('resources/sass/app.scss', 'public/css');
if (mix.inProduction()) {
mix.version();
}
2.- Go ahead and install fontawesome:
npm install --save #fortawesome/fontawesome-free
3.- Create a new file "resources/sass/app.scss" and include the following:
#import '~#fortawesome/fontawesome-free/scss/fontawesome';
#import '~#fortawesome/fontawesome-free/scss/regular';
#import '~#fortawesome/fontawesome-free/scss/solid';
#import '~#fortawesome/fontawesome-free/scss/brands';
4.- Execute the following commands:
npm install && npm run dev
and again
npm run dev
.
Steps
Before triggering Laravel Mix, we want Node.js and NPM installed on your machine.
node -v
npm -v
Install Node dependencies for Laravel Mix, Webpack, Autoprefixer, and PostCSS.
npm install autoprefixer#latest && npm install laravel-mix#latest && npm install postcss#latest && npm install webpack#latest --save-dev
Install the latest free version of Font Awesome via the npm package manager.
npm install #fortawesome/fontawesome-free --save-dev
Next, build your webpack.mix.js configuration. Please note that the default Laravel 8 install no longer uses SASS (as we did in previous Laravel versions) to compile our CSS assets.
const mix = require('laravel-mix');
mix.setPublicPath('public')
mix.setResourceRoot('../');
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
//
]);
The following dependency entry should now be in
your package.json.
// Font Awesome
"devDependencies": {
"#fortawesome/fontawesome-free": "^5.15.3",
In /resources/css/app.css, import one or more styles depending on which icon set you are interested in using.
#import '~#fortawesome/fontawesome-free/css/fontawesome';
#import '~#fortawesome/fontawesome-free/css/regular';
#import '~#fortawesome/fontawesome-free/css/solid';
#import '~#fortawesome/fontawesome-free/css/brands';
Now, we want to update our package.json to use the new Mix CLI. Please change the "scripts" section of package.json to the following.
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
Compile your assets and produce a minified, production-ready build.
npx mix -p
OR
npm run prod
Finally, reference your generated CSS file in your Blade template/layout.
<link type="text/css" rel="stylesheet" href="{{ mix('css/app.css') }}">
Happy Mixing!
I have it working by running: npm install font-awesome --save
I created resources/sass/custom.scss and added .sass('resources/sass/custom.scss', 'public/css'); to
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
])
.webpackConfig(require('./webpack.config'))
.sass('resources/sass/custom.scss', 'public/css');
in webpack.mix.js.
Then adding #import "node_modules/font-awesome/scss/font-awesome.scss"; to resources/sass/custom.scss.
After running npm run watch font awesome was available.
I know this is old but for anyone else this is my process; Laravel 8 framework, Webpack, Laravel Mix.
In my webpack.mix.js file I use the following:
if (mix.inProduction()) {
mix.copy('node_modules/#fortawesome/fontawesome-free/webfonts', 'public/fonts/font-awesome');
}
I then run this once before I start development:
npm run production
This copies all font awesome files to the public folder and ensures they are not copied during development.
Then, depending on where you copy your font awesome files to, you need to set the following just before importing font awesome within your main .scss file:
$fa-font-path: "/fonts/font-awesome/";
#import '~#fortawesome/fontawesome-free/scss/brands';
#import '~#fortawesome/fontawesome-free/scss/regular';
#import '~#fortawesome/fontawesome-free/scss/solid';
#import '~#fortawesome/fontawesome-free/scss/fontawesome';
Note - if you don't do this, the default font awesome public path referenced in your compiled .css file will be ../webfonts/ and cannot be loaded by your .css file.
I have this same exact problem, I found this question by searching for the solution, but none of the answers here worked.
Somehow, I've just managed to solve this, though I'm afraid it's a rather dirty solution. Perhaps someone with more knowledge of Mix can clean it up.
Here's what I've done in my webpack.mix.js file to fix this:
/*
* slow compile fix: https://github.com/tailwindlabs/tailwindcss/discussions/1514#discussioncomment-51903
*/
const mix = require('laravel-mix');
mix.js(
'resources/js/app.js',
'public/js'
)
.postCss(
'resources/css/tailwind.css',
'public/build/css',
[
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
]
)
.postCss(
'node_modules/#fortawesome/fontawesome-free/css/all.css',
'public/build/css',
[
require('postcss-import'),
require('autoprefixer'),
]
)
.postCss(
'resources/css/main.css',
'public/build/css',
[
require('postcss-import'),
require('autoprefixer'),
]
)
.combine(
[
`public/build/css/all.css`,
`public/build/css/tailwind.css`,
`public/build/css/main.css`,
],
`public/css/app.css`
)
Check the spelling of fontawesome.
#import '~#fontawesome/fortawesome-free/scss/brands';
#import '~#fontawesome/fortawesome-free/scss/regular';
#import '~#fontawesome/fortawesome-free/scss/solid';
#import '~#fontawesome/fortawesome-free/scss/fontawesome';
I'm starting to study VUEJS with Hot Module Replacement (or HMR), and I did a clean install of Laravel v5.8, and following the instructions in the documentation of the Laravel Mix -- https://laravel.com/docs/5.8/mix -- everything looks very simple, however, when running the npm run hot, error is displayed in the browser console.
Apparently it is functional, but I'm not sure if this is expected behavior or if in fact it is an error and that needs some adjustment or parameterization.
But the interesting thing is that if I run npm run dev, no error is displayed.
versions
# php artisan --version
Laravel Framework 5.8.37
# npm -v
6.13.4
# node -v
v12.16.1
# yarn -v
1.21.1
webpack.mix.js
const mix = require('laravel-mix');
mix.options({
hmrOptions: {
host: 'vueapp.lab',
port: '8080'
}
});
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
The reason for that is the app.scss is compiled by default by webpack and it is linked as a resource in mix.config.js.
So removing app.scss compilation from your mix.config.js and import it to your main .vue file (default is App.vue) hmr will do the trick.
In your main vue file add tag style like this:
<style lang="scss">
#import 'path/to/app.scss';
</style>
I had issue on importing a new .scss to a whole new page template vue which has different from the main scss file. I found this link but still my new styles won't work. By the way, I use laravel 5.4.
New vue component:
<style lang="scss" scoped>
#import "~sass/new"; //new scss file from resources/sass directory
</style>
I think I miss a library to install or what. Any help would be much appreciated.
Check if you have installed 'sass-loader' 'node-sass' 'style-loader'
if not then install it using below command
npm install sass-loader node-sass style-loader --save-dev
See if you package.json is similar to this
"devDependencies": {
"css-loader": "^0.23.1",
"node-sass": "^4.1.1",
"sass-loader": "^3.2.3",
"style-loader": "^0.13.1"
"vue-loader": "^9.0.0",
"vue-router": "^2.1.1",
"webpack": "^1.12.2",
"webpack-dev-server": "^1.12.0"
}
Then you can try
<style lang="scss" scoped>
#import 'main.scss'
</style>
This article must be helpful to you Using SASS/SCSS in Vue.js 2
I want use sparksuite/simplemde-markdown-editor in Laravel Mix compiling.
I have add this line in app.scss:
#import "node_modules/simplemde/dist/simplemde.min.css";
and this line in app.js:
window.SimpleMDE = require('simplemde');
I want compiling this plugin in my project...
/* in webpack.mix.js file add following lines at the end */
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
After adding Run below command in terminal
npm run dev
(or)
npm run watch