The VITL Stack - An Overview

The VITL (or VILT) stack consists of four amazing libraries which help piece an application together. The four are Vue, Inertia, Tailwind, and Laravel. In this post, i’m going to be giving a brief overview of each library and how to get setup. I’ve been using this specific stack for over two years and have created some pretty complex applications. I will go over my experiences in full detail in a different post but for now, I’ll be giving a quick overview of the stack. Let’s start by giving a brief overview of each library.

Vue

Vue is a Javascript framework created by Evan You. Vue is used by many popular websites including Upwork and Behance. As Vue is now defaulted to use Vue 3, it has two different APIs which help with the overall functionality of the Vue components, the composition API which was introduced to the core of Vue in Vue 3, or the options API which was the primary API for defining state and functionality within previous versions of Vue but is also still available to use within Vue 3 over using the composition API.

Inertia

Inertia is like a middleman which sits between your client-side (this example being Vue) and your server-side (this example being Laravel). It works as a protocol which allows pages and data to change without forcing a full page to reload. For example, if you use the built-in Inertia component <Link> to change the page, it will do so by intercepting the request and making the visit using XHR instead. Inertia can be used with a variety of client-side frameworks which are Vue, React and Svelte (at the time of writing this Svelte is currently not compatible with Inertias server-side rendering functionality but is being worked on). Inertia also offers support for SSR (Server Side Rendering), this allows for fully rendered HTML to be served by the application which is very beneficial if you’re looking to leverage SEO.

Tailwind

Tailwind is an impressive utility-first CSS library that makes styling elements very easy. It will scan files defined in the Tailwind config and only bundle the styles that have been used within those files to keep the compiled static CSS file as small as possible. Tailwind also offers an easy to use component library called Tailwind UI. Tailwind UI has an impressive library and offers easy copy and paste components for HTML, React, and Vue. You can find some of the components from Tailwind UI around my website.

Laravel

Laravel is an expressive PHP framework with everything you need to create a feature-packed web application. It’s very easy to get up and running with Laravel with their very easy-to-navigate and information packed docs. Laravel also has a vast ecosystem with products including Nova, Forge and Vapor. Laravel makes features that should be hard to integrate very easy to use. It has a very simple route configuration which is just two separate files, one for web routes and one for API routes. Middleware is also very simple to integrate, to create a new middleware you just need to run an artisan command, php artisan make:middleware MyNewMiddleware. This will then place a new middleware file in the app/Http/Middleware directory with an easy to customise configuration. You also have the option to easily scaffold user authentication with Laravel and Inertia using Breeze or Jetbreeze. I’m not going to dive into Laravel much more but I would highly recommend giving it your attention if you are yet to use it.

The Modern Monolith

Inertia brands itself as a modern monolith and for good reason. As you’ve probably guessed from the heading of this section the VITL approach is a monolithic approach, in terms of the VITL stack this means that all the client-side and server-side functionality are present in a single application instead of having a separate client-side that pulls in from a separate API. This can have its pros and cons, although it is easier to work with, the flexibility can be restrictive as it pretty much ties one single application. Deployment is made a whole lot simpler and easier to manage with the ability to be able to host your application in the same place instead of having to deploy the client-side and server-side separately. Personally, the VITL stack is my go-to when creating feature-packed applications.

To sum the post up, the VITL stack has feature-rich libraries which make creating a web application a breeze. It’s very enjoyable and easy to use and has a very good developer experience when using all the provided libraries. As mentioned the VITL stack is my go-to when creating web applications as Inertia makes client-side reactivity more simplistic and easier to manage when hydrating the client-side with new data from the backend. I’ve started to notice more web apps that use Laravel and Vue are now starting to transition over to using Inertia because of how easy and much more improved developer experience is. It may not be everyone’s cup of tea but it’s worth having a play with to see if it fits your needs. If you’re interested in learning more about using the VITL stack, Laracasts offers an amazing course for free!! You can find the course here.