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
Related
I just created a new project with Laravel and Sail. I am noticing that some Tailwind css classes are not loading when I run "sail npm run dev". For example, an element that had the utility "py-5" was not loading. So, I decided to try compiling with Laravel Mix again and it finally worked. Same happened when working with Tailwind css column classes. When I run Mix it always shows it compiled successfully.
Any ideas?
The problem probably results because you want to build tailwindcss once in the container but it is not configured / installed there. Locally it seems to work for you already. Therefore, you should go through the following steps.
Make sure that you are already install tailwind and other dependency via: sail npm install.
Check always if you have postcss anbd autoprefixer installed via sail: sail npm install -D tailwindcss#latest postcss#latest autoprefixer#latest.
Then check your webpack.mix.js file. It have to look like:
mix.js("resources/js/app.js", "public/js")
.postCss("resources/css/app.css", "public/css", [
require("tailwindcss"),
]);
Add to your css file this three lines:
#tailwind base;
#tailwind components;
#tailwind utilities;
Then run sail npm run dev.
Tailwind has a config option (tailwind.config.js) in what files it will look for the classes used, make sure all the files you use the tailwind class in are part of the content option.
module.exports = {
...
content: [
'./storage/framework/views/*.php',
'./resources/**/*.blade.php',
'./resources/**/*.js',
],
...
}
How can I solve this warning when creating laravel project?
1 WARNING in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
Steps to replicate:
composer create-project --prefer-dist laravel/laravel example
cd example
composer require laravel/ui
php artisan ui vue --auth
npm install vue#next vue-router#next vue-loader#next
npm install
npm run dev
EDIT
From this solution, add these lines to webpack.mix.js
mix.webpackConfig({
stats: {
children: true,
},
});
The above solution creates another warning:
WARNING in ./resources/sass/app.scss (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-6.use1!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./node_modules/resolve-url-loader/index.js??clonedRuleSet-6.use[3]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-6.use[4]!./resources/sass/app.scss)
Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
Warning
(2423:3) autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.
Child mini-css-extract-plugin C:\xampp\htdocs\lva\node_modules\css-loader\dist\cjs.js??clonedRuleSet-6.use1!C:\xampp\htdocs\lva\node_modules\postcss-loader\dist\cjs.js??clonedRuleSet-6.use[2]!C:\xampp\htdocs\lva\node_modules\resolve-url-loader\index.js??clonedRuleSet-6.use[3]!C:\xampp\htdocs\lva\node_modules\sass-loader\dist\cjs.js??clonedRuleSet-6.use[4]!C:\xampp\htdocs\lva\resources\sass\app.scss compiled with 1 warning
webpack compiled with 1 warning
How can I solve this?
The color-adjust shorthand is currently deprecated and it depends on the autoprefixer#10.4.6 (source).
I was able to fix this by reverting the autoprefixer package as well as #Benno to version 10.4.5. Run this:
npm install autoprefixer#10.4.5 --save-exact
You probably updated your npm packages. I was able to fix this by reverting the autoprefixer package to version 10.4.5 in the package-lock.json.
when you have problem with autoprefixer maybe because your version autoprefixer. you can add version autoprefixer based problem this version autoprefixer . i have problem on "print-color-adjust" and i add code on my package.json for change my autoprefixer become version "10.4.5"
when you use npm
"overrides": {
"autoprefixer": "10.4.5"
},
Or, when you use yarn
"resolutions": {
"autoprefixer": "10.4.5"
},
Don't forget to delete your package-lock and node_modules , then npm install again.
it work for me (react-bootstrap.v.5)
If you don't want to add additional packages to solve this error, then try this:
Capitalize all the files and Directory name in your components folder
Or you can run this command to install a package if the above solution doesn't work.
npm install autoprefixer#10.4.5 --save-exact
I'm using React with InertiaJS and Laravel as backend, this solution worked in my case.
Thanks
I have the same problem, whenever I hit save an annoying pop-up of error code comes. The simple solution is to add the following code to your webpack.mixjs file :
mix.webpackConfig({
stats: {
children: true,
},});
stop the npm run watch
add a package autoprefixer, add below in terminal:
npm install autoprefixer#10.4.5 --save-exact
run npm run watch and it will not give the error again.
I solved this issue within Laravel by changing the file ./node_modules/bootstrap/scss/forms/_form-check.scss
Line 28 part of the .form-check-input style
change color-adjust: exact; // Keep themed appearance for print
to print-color-adjust: exact; // Keep themed appearance for print
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 want to install MDB Vue in my fresh Laravel application Im trying to do it via npm but it's not working
I did :
1- created fresh Laravel app
2- Go to the directory www/myApp
3- npm install
4- npm install --save mdbvue
5- npm install --save-dev babel-preset-stage-2
6- I open app.scss
and add:
// Material Design Bootstrap
#import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
#import '~bootstrap/scss/bootstrap';
#import "~mdbvue/build/css/mdb.css";
7- I open ressources/js/bootstrap.js
I add:
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
require('mdbvue'); // I added this!
} catch (e) {}
it require('mdbvue') I notice a message in the picture:
https://i.imgur.com/IkKvXkb.jpg
I can't post it need more reputations
I keep going I did
8- npm run dev
Everything is green and looking fine but when
I go take MDB buttons in exemple and put themes in my view it's not working
did I missed something ? help please
Your have to add your imports in the app.js file.
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbvue/build/css/mdb.css'
For me it works without the require('mdbvue'); in the bootstrap.js.
But i think the reason you did´nt get an answer for your question is, there are other problems with the integration of mdbvue into the laravel environment.
For example i have not found a way yet to import fontawesome from my npm-installation folder import '#fortawesome/fontawesome-free/css/all.min.css';.
But when i add <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"> to my html-head, fontawesome works.
If i find some solutions, i will update this post.
Hope i could help you a bit.
I had the same issue, I could solved it like this:
Cd into your project
Run: npm install
Run: npm install mdbvue
Add the following code to your 'resources/js/app.js' file:
require('./bootstrap');
import '#fortawesome/fontawesome-free/css/all.min.css'
import 'bootstrap-css-only/css/bootstrap.min.css'
import 'mdbvue/lib/css/mdb.min.css'
Add the following code to your 'resources/js/bootstrap.js' file:
require('mdbvue');
Run: npm run dev
It worked for me, using laravel 5.8.35 and the lastest version of MDVUE.
How would you get Bootstrap 4 Beta running in a fresh Laravel 5.5 installation? I need to be able to version the style sheets and javascript but i can't seem to get it working.
I figured it out! The process doesn't seem to be well documented so i decided to post it here in case any one else battles with the process!
Once you have created a new project, navigate to your package.json file and remove bootstrap-sass. Once you have done this, delete your node_modules folder.
1) In your terminal run npm install bootstrap#4.0.0-beta --save
2) In your terminal run npm install popper.js --save
3) If needed run npm install to install any other node modules.
4) Navigate to resources/assets/js/bootstrap.js file and make the following changes:
try {
window.$ = window.jQuery = require('jquery');
window.Popper = require('popper.js').default;
require('bootstrap');
} catch (e) {}
5) Open your webpack.mix.js file and add the following:
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.version();
mix.browserSync('bootstrap.dev');
6) Now if you run npm run watch if you have done everything correctly, your Laravel 5.5 project should now be running with Bootstrap 4 Beta!