CODEWITHSUNDEEP
laravellaravel-5twitter-bootstrap-3vue.js
Hitendra
Hitendra

Reputation: 3226

Laravel 5.5 bootstrap error

I am getting below error.

Uncaught Error: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.

app.js

require('./bootstrap');
window.Vue = require('vue');

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

import VueAxios from 'vue-axios';
import axios from 'axios';
Vue.use(VueAxios, axios);



import App from './App.vue';
import Login from './components/Login.vue';
import Register from './components/Register.vue';
import Activity from './components/Activity.vue';
import SelectPersons from './components/SelectPersons.vue';

const routes = [
  {
      name: 'Login',
      path: '/',
      component: Login
  },
  {
      name: 'Register',
      path: '/register',
      component: Register
  },
  {
      name: 'Activity',
      path: '/activity',
      component: Activity
  },
  {
      name: 'SelectPersons',
      path: '/selectpersons',
      component: SelectPersons
  }
];

const router = new VueRouter({ mode: 'history', routes: routes});
new Vue(Vue.util.extend({ router }, App)).$mount('#app');

bootstrap.js

window._ = require('lodash');

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

try {
    window.$ = window.jQuery = require('jquery');

    require('bootstrap-sass');
} catch (e) {}

window.Vue = require('vue');

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**
 * Next we will register the CSRF Token as a common header with Axios so that
 * all outgoing HTTP requests automatically have it attached. This is just
 * a simple convenience so we don't have to attach every token manually.
 */

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

// import Echo from 'laravel-echo'

// window.Pusher = require('pusher-js');

// window.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: 'your-pusher-key'
// });

Here is the file that loads every vue component or blade template pages.

<html>
  <head>
    {{Html::style('/css/bootstrap.css')}}
    {{Html::style('/css/style.css')}}
    {{Html::script('/js/bootstrap.js')}}
  </head>
  <body>
    <div id="app">
    </div>
    <script src="{{asset('js/app.js')}}"></script>
  </body>
</html>

I am using Laravel with vue. Can anybody help me to solve this issue?

Thanks

Upvotes: 0

Views: 1412

Answers (2)

Frnak
Frnak

Reputation: 6802

Your app.js contains jquery. so do as the error says and load bootstrap after jquery.

<html>
  <head>
    {{Html::style('/css/bootstrap.css')}}
    {{Html::style('/css/style.css')}}
  </head>
  <body>
    <div id="app">
    </div>
    <script src="{{asset('js/app.js')}}"></script>

    {{Html::script('/js/bootstrap.js')}}
  </body>
</html>

Upvotes: 1

Blues Clues
Blues Clues

Reputation: 1848

Bootstrap required jQuery to run some of its features like the dropdown. the error says "Uncaught Error: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.". So first, require the jquery library, then next is the bootstrap.min.js or bootstrap.js. Please feel free to comment if you have any problem with this. And one more thing, it is better to place your all JS files before </body>.

Try this

<html>
  <head>
    {{Html::style('/css/bootstrap.css')}}
    {{Html::style('/css/style.css')}}
  </head>
  <body>
    <div id="app">
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    {{Html::script('/js/bootstrap.js')}}
    <script src="{{asset('js/app.js')}}"></script>
  </body>
</html>

Upvotes: 0

Related Questions