Using Foundation Sites with Laravel 5.3 and Webpack

Dan Pastori avatar
Dan Pastori February 24th, 2017

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!

Support future content

The Ultimate Guide to Building APIs and Single-Page Applications with Laravel + VueJS + Capacitor book cover.

Psst... any earnings that we make off of our book is being reinvested to bringing you more content. If you like what you read, consider getting our book or get sweet perks by becoming a sponsor.

Written By Dan

Dan Pastori avatar Dan Pastori

Builder, creator, and maker. Dan Pastori is a Laravel certified developer with over 10 years experience in full stack development. When you aren't finding Dan exploring new techniques in programming, catch him at the beach or hiking in the National Parks.

Like this? Subscribe

We’re privacy advocates. We will never spam you and we only want to send you emails that you actually want to receive. One-click unsubscribes are instantly honored.

What topics are you interested in?
Are you interested in our upcoming book?