Using Foundation Sites with Laravel 5.3 and Webpack

Out of the box, Laravel 5.3 ships with Twitter Bootstrap. However, if you are like me, you prefer Zurb Foundation 6. Setting up Laravel 5.3 to work with foundation is a breeze!

After you install laravel, open your package.json file. You will see in the dev dependancies the reference to bootstrap. Remove that dependancy and replace with the newest version of Foundation Sites (at the time of this article, it was 6.3).

Your package file should look similar to:

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "foundation-sites": "^6.3.0",
    "gulp": "^3.9.1",
    "jquery": "^3.1.0",
    "laravel-elixir": "^6.0.0-9",
    "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"
  }
}

All you have to do now is run npm install in your terminal and all of your dependancies will be configured for using Foundation. Now you just need to tweak a few of the files and you will be running Foundation 6!

After NPM finishes the dependancies, open your /resources/assets/sass/app.scss file and replace the import for Twitter Bootstrap, with @import "node_modules/foundation-sites/assets/foundation.scss";.

Next, in the /resources/assets/js directory, create a file named: foundation.js (very similar to the bootstrap.js file). Open foundation.js and copy the contents of bootstrap.js into your foundation.js file. Replace the require('bootstrap-sass') reference on line 11 with require('foundation-sites').

My foundation.js file looks like:

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.
 */

window.$ = window.jQuery = require('jquery');
require('foundation-sites');

/**
 * Vue is a modern JavaScript library for building interactive web interfaces
 * using reactive data binding and reusable components. Vue's API is clean
 * and simple, leaving you to focus on building your next great project.
 */

window.Vue = require('vue');
require('vue-resource');

/**
 * We'll register a HTTP interceptor to attach the "CSRF" header to each of
 * the outgoing requests issued by this application. The CSRF middleware
 * included with Laravel will automatically verify the header's value.
 */

Vue.http.interceptors.push((request, next) => {
    request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken);

    next();
});

/**
 * 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.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: 'your-pusher-key'
// });

You are good to go! You now have Zurb Foundation with Laravel 5.3 instead of Bootstrap. You will have to obviously initialize Foundation on page load using jQuery and might have to adjust some class names on the default laravel views if you are using them, but you should be set!