Updated version for Laravel 10 / Twill 3 on Apr 13, 2023
We are not regular writers and even less in english, so please accept our apologies in advance! (and we encourage your feedback)
After some years building Laravel based applications and using more and more Vue.js for the front-end, we are now updating our stack for CMS projects, trying to bring together the best tools and practices to provide the best experience for our clients, our clients' clients and of course us as developers.
For this first article of the serie, we will introduce the stack
Laravel
Twill
Inertia
Vue 3 with Composition API and TypeScript
Vite
Tailwind
Laravel
Website: https://laravel.com
Documentation: https://laravel.com/docs/10.x
We are mainly PHP developers and we cannot imagine using another framework these days. But if you are here, we guess your share the same feelings (let us know if not, we can provide some insights).
Twill
Website: https://twill.io
Documentation: https://twillcms.com/docs/
Despite the huge Laravel ecosystem, it's not easy to find a package that offers CMS features with a good UX for our clients. We use Twill since 2020 and built dozens of projects, we (and our clients) are very satisfied with the functionalities and flexibility this open source package offers:
No front-end: that could scare you a little bit at first, but it allows you to use it with Laravel or as a headless CMS
CLI to create needed files to handle new content (model, admin controller, form, routing, admin navigation)
Multi-language in a very easy way to work with
Content publication status and scheduling (draft, start and end dates), responsive preview, revisions with visual comparison
Media library with built-in Glide integration (smart cropping and profiles)
Block editor, repeaters for quick and flexible content creation
Dashboard you can customize
Inertia
Website / Documentation: https://inertiajs.com
After some small projects made with Inertia, we are now confident this back-end/front-end wrapper (hard to find a good definition) is a game changer, allowing us to build our back-end as a standard Laravel application and make it a SPA with Vue.js page components without worrying about Ajax calls, shared data, ...
Vue 3 / TypeScript
Website: https://vuejs.org/
Documentation: https://vuejs.org/guide
After some Vue 2 / Nuxt projects, it's time to move forward and go for Vue 3, and if we are going to use it, we should do it with the best approach, meaning
Composition API: better and cleaner code definition, reuse and sharing
TypeScript: good support for Composition API, and also better and cleaner code
Vite
Website: https://vitejs.dev
Documentation: https://vitejs.dev/guide
Before version 10, Laravel came natively with Laravel Mix based on Webpack and we used it a lot. But we are not big fans of Webpack (surely a lack of investment on our part), and on big projects, we got some big build times, slow Hot Module Replacement and big outputs.
Then appeared Vite in 2020 which seemed to provide faster development experience with Hot Module Replacement and Rollup for production builds. So, we decided to give it a try... and became the default asset bundling tool in Laravel 10!
Tailwind
Website: https://tailwindcss.com
Documentation: https://tailwindcss.com/docs
Tailwind is a utility-first CSS framework. There are Pros and Cons and we will not be arguing that here. We use it for many years now, it continues to improve (responsive, dark mode, small size production builds purging unused CSS with PostCSS), so why change!
We'll do our best to provide source code of the serie on GitHub