I try to start a Laravel 5.4 project without Bootstrap.
After installing Laravel, I edited the following files:
resources/assets/js/app.js
require('./bootstrap');
package.json
...
"devDependencies": {
"axios": "^0.15.3",
"bootstrap-sass": "^3.3.7",
"jquery": "^3.1.1",
"laravel-mix": "^0.7.2",
"lodash": "^4.17.4",
"vue": "^2.1.10"
},
...
I've got the following error:
ERROR Failed to compile with 1 errors
error in ./resources/assets/js/app.js
SyntaxError: /Users/.../package.json: Error while parsing JSON - Unexpected end of JSON input
at JSON.parse ()
# multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
Any suggestions?
By default, Laravel 5.4 ships with Bootstrap and Vue.js scaffolding, but not everyone wants to use either of those technologies. With Laravel 5.5 you can run this if you don’t want any scaffolding to be generated out of the box by Laravel:
php artisan preset none
The line
require('./bootstrap')
has nothing to do with the Bootstrap CSS library. It loads the bootstrap.js file, which you will find in your assets. This file serves the purpose of "bootstrapping" your application (front-end). If you want to remove the Bootstrap CSS library from your project you should:
remove it from package.json
remove dependencies within your app layout
remove loading of sources from app.js / bootstrap.js
If you run "npm install" in the command line, bootstrap's sass files will be downloaded. Running "npm uninstall bootstrap-sass" afterwards will get rid of them.
I also wanted to get rid of bootstrap css codes in my laravel project. I opened the file
resources/sass/app.scss
and simply commented out the corresponding line as bellow
// Bootstrap
//#import '~bootstrap/scss/bootstrap';
Related
I use Vue with Laravel. But I get this error "mix.js() is missing required parameter" when I run
npm run watch.
Here is my code:
const mix = require("laravel-mix");
mix.js("resources/js/app.js", "public/js").vue();
mix.sass("public/assets/scss/style.scss", "public/assets/css");
mix.browserSync("127.0.0.1:8000");
Please share with me how to handle this error.
Change in version works well with laravel 7.3.* see link below
The solution was to change to version ^6.0.6 in package.json and run npm install, as the .vue() call is a new feature in Laravel Mix 6.
"devDependencies": {
// ...
"laravel-mix": "^6.0.6",
// ...
},
Then on webpack.mix.js.
mix.js('resources/js/app.js', 'public/js').vue();
https://nono.ma/assertionerror-mix-js-is-missing-required-parameter-1-entry
I have created a vuejs template with laravel integration. On creating project with vue-laravel, by default the laravel-mix version is 2.0 and at that time my project is running well in all browsers. But now I am updating version of laravel-mix from 2.0 to 4.0.14. On updating it, blank screen should be display on I.E browser. As I am new in vue+laravel and not enough knowledge about it. I am trying to resolve this issue by following many links but did't get the results. Please anyone knows how it should be possible to run vue+laravel project on IE and what changes are required.
Screenshot of IE browser console:
Here is my webpack.mix.js file code:
//webpack.mix.js
let mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.autoload({
'jquery': ['$', 'window.jQuery', 'jQuery'],
})
mix.js('resources/js/main.js', 'public/js');
Here is my development dependencies in package.json file:
// package.json
"devDependencies": {
"axios": "^0.18",
"babel-preset-stage-2": "^6.24.1",
"bootstrap": "^4.1.3",
"cross-env": "^5.2.0",
"jquery": "^3.3.1",
"laravel-mix": "^4.0.14",
"lodash": "^4.17.11",
"node-sass": "^4.11.0",
"popper.js": "^1.14.6",
"sass-loader": "^7.1.0",
"vue": "^2.5.19",
"vue-template-compiler": "^2.5.22"
}
.babelrc file code:
//.babelrc
{
"plugins": ["syntax-dynamic-import"]
}
If anyone needs more info let me know. Thanks!
for IE, you need to install and include polyfill as well.
npm install --save #babel/polyfill
I want to add a carousel plugin into laravel.
https://github.com/OwlCarousel2/OwlCarousel2
so I run npm install --save owl.carouse and add following code into index.blade.php
<script src="/node_modules/owl.carousel/dist/owl.carousel.js"></script>
The owl.carousel.js is inside my project, but when I run npm run watch, and look at the browser, there show an error in the console:
GET http://127.0.0.1:8000/node_modules/owl.carousel/dist/owl.carousel.js 404 (Not Found)
Why is that?
You should not import it through a script tag. Add it in your bootstrap.js file
require('owl.carousel');
require() will use the node_modules as the root dir
You can of course use require in any other .js file that you then import through a script tag.
If you are using VueJs you do at the top of the vue component
import owl from 'owl.carousel'
Your web server does not have access to node_modules directory.
You'd better use gulp to copy and bundle it to public directory.
Or else if you want, you can do it manually. Copy the script to the public directory.
I usually make asset/js directory under the public and then copy owl under it.
You will have:
<script src="/asset/js/owl.carousel/dist/owl.carousel.js"></script>
Add this line in your main .scss file:
#import '~owl.carousel/dist/assets/owl.carousel.css';
Compile the css with npm run dev
You can repeat these steps for your javascript files
Edit:
If you do not make use of Laravel mix yet, read this documentation first. https://laravel.com/docs/5.6/mix
Here's my webpack.mix.js file:
mix.js('resources/assets/js/app.js', 'public/js')
.combine(['public/js/app.js', 'node_modules/owl.carousel/dist/owl.carousel.js'], 'public/js/app.js');
I am launching js task, then combining all js files into a single one.
When i run npm run dev everything works as expected, but if i run npm run watch and then edit a file that being required in app.js (custom.js) this way:
require('./bootstrap');
require('./custom.js');
Then save the changes, mix is compiling very long, after it finishes my changes not reflected. Am i doing something wrong there?
Loop issue was because i used the same name when combining js files - app.js.
Correct way is not using combine, i've included my owl carousel file in app.js:
require('owl.carousel');
Right now I have bootstrap 3 and I want to update it to 4 in laravel 5.5
So I guess I have to change my composer file
from
"bootstrap-sass": "^3.3.7",
to
"bootstrap": "4.0.0",
"popper.js": "^1.12.6",
That will install bootstrap 4 but how do I link it to my current application.
I don't know in which files laravel is referencing the bootstrap 3 files.
you can just download bootstrap 4 bootstrap.css and replace the content of app.css file in public directory or public/css diectory with the content of the downloaded file. And all is well, you can use it in all *.blade.php file.