Javascript in Laravel (a Bootstrap theme)

Combining a bootstrap theme and Vue

Update May 2021

Please note that this post is currently 3 years old. As you know, things move fast in our tech world and event though the principles described in this post are still valid, there might be better ways to achieve the same result; You are free to continue reading, but I recently wrote a post about our current approach.

Additionally, Laravel 8 brings a new starter kit to quickly scaffold the frontend of your next project. It’s called Laravel Jetstream and is definitely worth taking a look. I’ll choose Laravel Jetstream with Inertia scaffolding for my next project.

Therefore, I am removing the code repository that originally came with this post.

Original post

This is the sixth and final post in our Javascript in Laravel series. So far we discussed various approaches for adding Javascript behaviour to Laravel’s blade views.

In today’s post I’ll discuss the following situation: you’re developing a new web application in Laravel for a customer who already has a (Bootstrap) theme. Based on the specifications of the project, you’re pretty sure that additional Javascript behaviour is required on various pages.

If you are new to this series, I advice you to have a look at the overview post in which you can read the outline of the full series.

A Bootstrap theme usually means we have to include jQuery and Bootstrap on all pages. Additionally, we also like to have a single Vue instance to handle all other requirements of the project.

Our approach in such a case is the following:

• First get rid of all functionality of the theme you don’t need. That means less scripts to be loaded into the page.
• Add the remaining scripts to your page, but after the script that loads the Vue app.
• Keep the custom functionality that you’ve build with Vue apart from the jQuery stuff.
• If you really need to combine jQuery and Vue for a specific use case (like the use of a specific jQuery plugin as detailed in this excellent post), do it with care!

No code examples in this post. I believe that if you really need a jQuery theme for quickly setting up a demo project or a minimal viable product, it is best to do so and make the project work. However, when you are building a large and complex app for production, I think it is best to tear the theme apart and just use the building blocks of it by including them in your Vue app.

A little of topic, but recently we have combined a Bootstrap theme with a Vue SPA which worked out fine. I must admit, we didn’t leave much of the original theme except for the meanmenu plugin, a preloader and loads of stylesheets.

The project is called Solo Cooking and is about recipes for people that often cook and eat alone and could use a little inspiration. If you can follow along in dutch, the project can be found here.