Spicing up a Laravel webapp with Vue

Recently, we gave our own administration tool an upgrade. The reasons for this were two-fold. First, It ran on an older version of Laravel (5.1) and with the release of Laravel 5.5 we figured it was time to update. Second, each blade template had a script tag containing all kind of jQuery code and many scripts that were included in the head section of the document. This was no longer maintainable.

Hence we did an update to Laravel 5.5, also taking the time to improve the code of the app. Improving the back-end code was straight forward, but updating the front-end code was a bigger challenge. Nowadays, we use Vue for our client side work, so it was time to remove all jQuery and replace it with Vue.

Our administration tool is a rather small webapplication , so we made the choice to just spice up the existing Laravel blade templates with some Javascript  instead of building a single page application with Laravel as the backend API.We wrote a simple Vue script for each page, utilizing reusable Vue components. This way we could have very small Javascript files on each page, while keeping our code base dry (don’t repeat yourself).

So, for each page with Javascript on it our blade template ends with these lines:

   <script src=”{{ mix(‘/js/manifest.js’) }}”></script>
   <script src=”{{ mix(‘/js/vendor.js’) }}”></script>
   <script src=”{{ mix(‘/js/todos.js’) }}”></script>

Three scripts per page seems a bit overkill, but we used code splitting to put the libraries (Vue, axios, colorpicker, datepicker etc.) in a vendor. Furthermore, we use versioning to overcome new releases not being picked up by the browser due to caching (this is where the manifest file is for). This is all very easy using the excellent laravel-mix package that makes compilation with webpack a breeze. The last javascript file, todos.js, is a page specific file for the todo page.

Given that we have a Vue script for each page, the webpack mix file looks like this

mix.js('resources/assets/js/todos.js', 'public/js')
   .js('resources/assets/js/todo.js', 'public/js')
   .js('resources/assets/js/project.js', 'public/js')
   .js('resources/assets/js/customer.js', 'public/js')
   .js('resources/assets/js/invoice.js', 'public/js')
   .js('resources/assets/js/statistics.js', 'public/js')
   .js('resources/assets/js/hoursearch.js', 'public/js')
   .extract(['vue', 'axios', 'v-tooltip', 'vue-bootstrap-datetimepicker', 'vue-color'])
   .less('resources/assets/less/app.less', 'public/css')

Each .js row is an entry point for webpack, which compiles the files and puts the result in public/js. The extract command takes care of the code splitting. The sourceMaps are ideal for development. However,  they drastically enlarge the compiled files, so we don’t want them in production and pass false as argument.

This way we end up with 7 very small files in production and a larger vendor file containing libraries.

With this in place, we have finished updating our administration tool that uses modern techniques and is ready for the future!

Mijn Twitter profiel Mijn Facebook profiel
Pim Hooghiemstra Webdeveloper and founder of PLint-sites. Loves to build complex webapplications using Vue and Laravel! Latest post
gyp error message during npm install

Leave a Reply

Your email address will not be published. Required fields are marked *