Recently I decided to switch from Bootstrap to Bulma because there are so many Bootstrap websites out there and I was ready to try something new.
Bulma is fully based on flexbox and does not come with the requirment to have jQuery nor does it include any javascript.
To add basic functionality, such as modals, navbar button functionality, you are free to create your custom scripts for this.

To get started, first thing is first, we pull in a Laravel installation through composer. For those that have not worked with Laravel Mix before, you will notice that under your resource/assets folder, you have 2 folders ‘js’ and ‘sass’:

When looking in app.js; you notice that bootstrap is required by default and there is already a basic Vue component registered.
We can leave the example Vue component there, but let’s remove the Bootstrap requirement so basically your ‘app.js‘ will look like this:

Vue.component('example', require('./components/Example.vue'));

const app = new Vue({
    el: '#app'
});

Next, you have your ‘app.scss‘ file, where we also will remove the Bootstrap stuff from it, so it will be empty.

After that, we can pull in all the cool stuff using NPM which we will be using:

npm install vue axios bulma --save-dev

When our requested packages are imported, let’s start defining them in our ‘app.js‘ file, together with some basic functionality for Bulma (mobile navigation menu toggle).
So edit your ‘app.js‘ file so it looks like this:

import Vue from 'vue';
import axios from 'axios';

window.axios = axios;
window.Event = new Vue();

Vue.component('example', require('./components/Example.vue'));

const app = new Vue({
    el: '#app'
});

(function() {
    var burger = document.querySelector('.nav-toggle');
    var menu = document.querySelector('.nav-menu');
    burger.addEventListener('click', function() {
        burger.classList.toggle('is-active');
        menu.classList.toggle('is-active');
    });
})();

And of course we also need to make the right changes to our ‘app.scss‘ file like so:

// Bulma
@import "node_modules/bulma/bulma";

Now, almost there, we need to pull in the packages so we can actually use Laravel Mix by running:

npm install

in our Laravel installation.

After that is done, you can check out ‘package.json‘ in your Laravel installation folder and remove jQuery and Bootstrap from the devDependencies:

In this file, you will also notice the various options to ‘mix’ our app.css and app.js files. Let’s start by running:

npm run dev

And you will notice that this will result in a app.js and app.css file in your public folder as can be seen below:

And there we have it, we have our base to work with Vue, Axios and Bulma in Laravel!

 

Happy coding!