Vue not loaded with Bootstrap 4 alpha if without Tether

Hello,

I installed a new Laravel application with bootsrap 4 alpha5. Anyone had an issue? When adding the example Vue component on the home page it does not appear. VueJS seems not loading at all. If I comment the line "require('bootstrap');" in resources/assets/js/bootsrap.js the example component is rendered but then of course the toggle menu is not working...

Package.json file

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "bootstrap": "^4.0.0-alpha.5",
    "jquery": "^3.1.0",
    "laravel-elixir": "^6.0.0-11",
    "laravel-elixir-vue-2": "^0.2.0",
    "laravel-elixir-webpack-official": "^1.0.2",
    "lodash": "^4.16.2",
    "vue": "^2.0.1",
    "vue-resource": "^1.0.3"
  },
  "dependencies": {
  }
}

bootstrap.js line 11

require('bootstrap');

I didn't changed anything in the gulpfile. It compiles without errors.

const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');

elixir((mix) => {
    mix.sass('app.scss')
       .webpack('app.js');
});

Thanks

prasinoulhs

9 years ago

Best Answer

Level 4

Did you add Tether? See this issue.

Also make sure you check the console for errors.

mdecooman

9 years ago

Level 19

Thanks @prasinoulhs, that is indeed the issue. I update the title of this issue so it may help others.

So to make it work I added Tether

yarn add tether

then modified bootstrap.js

window.$ = window.jQuery = require('jquery');
window.Tether = require('tether');
require('bootstrap');

working now :)

Please or to participate in this conversation.