Level 2
require('./bootstrap.js')
Aug 26, 2017
8
Level 2
Problems with bootstrap
Hi,
I got problems with bootstrap. The JS part is not imported into my template (or so it seems.)
Seems css is imported just fine (boostrap), as I can do 'class="btn btn-primary"' and the styling works just fine. However, my menu are not working (using default bootstrap one).
This is the end of my app.js file:
.....
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('example', require('./components/Example.vue'));
const app = new Vue({
el: '#app'
});
https://hydraulikskolen-kgp43.c9users.io/js/app.js:
Looks like the bootstrap is not imported?
Level 2
That did not work either. Think it need to include the entire folder - no ./bootstrap.js file exists.
ressources/assets/js/app.js:
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
//require('./bootstrap');
require('./bootstrap.js')
window.Vue = require('vue');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('example', require('./components/Example.vue'));
const app = new Vue({
el: '#app'
});
Level 39
How did you install Bootstrap? Through NPM ?
If so, just do require(name_of_bootstrap_folder_in_node_modules_folder);
If that fails, then check the console in Chrome. I know B4 Beta now requires a plugin called Popper for dropdowns and tooltips instead of Tether.
Level 32
Can you, please, show the content of the bootstrap file, which is in the same directory than app.js. There you'll find the require of bootstrap framework and co.
Level 2
No bootstrap file in the same directory as the app.js file. bootstrap-sass folder exists in node_modules folder.
Have been running:
npm install
package.json:
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.16.2",
"bootstrap-sass": "^3.3.7",
"cross-env": "^5.0.1",
"jquery": "^3.1.1",
"laravel-mix": "^1.0",
"lodash": "^4.17.4",
"vue": "^2.1.10"
},
"dependencies": {
"font-awesome": "^4.7.0",
"metismenu": "^2.7.0"
}
}
Do i still have to install bootstrap using npm? I thought that was already included by default?
Level 2
Think i had an error in my webpack.mix.js file:
mix.sass('resources/assets/sass/app.scss', 'public/css');
mix.styles([
'node_modules/metismenu/dist/metisMenu.min.css'
], 'public/css/vendor.css', './');
mix.scripts([
'node_modules/metismenu/dist/metisMenu.min.js',
'resources/assets/js/app.js'
], 'public/js/app.js', './');
if (mix.inProduction()) {
mix.version();
}
I tried to combine all my js into a single file (app.js), but it did it work - or so it seems.
This include jquery and bootstrap:
mix.js('resources/assets/js/app.js', 'public/js');
mix.sass('resources/assets/sass/app.scss', 'public/css');
mix.styles([
'node_modules/metismenu/dist/metisMenu.min.css'
], 'public/css/vendor.css', './');
mix.scripts([
'node_modules/metismenu/dist/metisMenu.min.js'
], 'public/js/vendor.js', './');
// Put version on css and js, but only when in production
if (mix.inProduction()) {
mix.version();
}
Level 2
I wonder if my app.js file has been compiled correctly. It looks odd.
https://gist.github.com/kgp43/b4efba840ba966983f706c364537f4bb
Level 39
All of that code that you see that is 'odd' is fine. That's just webpack related stuff.
Yeah so to get bootstrap working then, all you need to do is require('bootstrap-sass') and it should work.
This actually usually comes out of the box in the bootstrap.js file. If its not there for some reason, just add it after jQuery
Please or to participate in this conversation.