Building Advanced Vue.js Applications

Read articles about building advanced applications with Vue.js and Vuex. The articles are mostly about advanced Vue.js techniques like Vuex best practices, renderless components, and other advanced techniques for structuring large scale Vue.js applications.

If you want to learn even more about advanced Vue.js techniques, you can sign up for the Newsletter of my upcoming book.

Cut Your Nuxt.js generate Build Time in Half with context.payload

One of my freelancing projects is a Nuxt.js project powered by the headless CMS Storyblok. Because performance is critical, I decided to use Nuxt.js in generate mode outputs static HTML files for each page at build time. But because Nuxt.js needs to generate 1.000+ pages, the build time got long...

Read more

Vue.js Functional Base Components Powered by CSS Modules

In one of my earlier articles, I wrote about how to use functional Vue.js components so that they inherit attributes such as classes and styles. This way, functional components are perfect for creating simple base components. In this article, we take a look at how we can simplify and generalize the process of creating new functional base components by automatically creating new Vue.js components from CSS files...

Read more

Lazy Resolving Observable API Services with Vue.js

Although GraphQL is pretty cool and powerful, I also like the simplicity of good old REST API endpoints. Also, we often can't use GraphQL for everything because there is no GraphQL endpoint available. In this article, we take a closer look at how we can replicate one of the core features of GraphQL, which makes it possible only to load what is absolutely necessary, in a classic REST API-based application...

Read more

Vuex Data Model and Feature Module Strategy Part 2: Feature Modules

In this article, we extend the functionality of our very simple demo application from the previous article to display multiple paginated lists for the same content type. The paginated list feature module does not fetch any data itself but instead connects to the data model module. Doing so makes it possible to cache requests with the same query across feature modules to reduce the number of requests to your API and make your app feel snappy...

Read more

Reusable Functional Vue.js Components with Tailwind CSS

Tailwind is a CSS framework that I never used extensively, but I always found it interesting enough to keep it on my radar and occasionally play around with it. Today we explore how we can use Tailwind CSS with Vue.js. In this article, we identify potential pitfalls when using utility-first CSS frameworks and how to avoid them. Most importantly, we find out how to use Vue.js functional components to create abstractions for repeating patterns like cards and headlines...

Read more

Setting up Tailwind CSS with Vue.js

Tailwind CSS is one of the rising stars in the CSS framework world. It's especially popular in the Laravel and Vue.js community. So in my next two articles, we take a closer look at this utility-first CSS framework. In this article, we learn how to set up Tailwind CSS to work with a Vue CLI powered application...

Read more

Scrolling Shadows with Vue.js

Sometimes we find ourselves in a situation where the content of a particular area of our website or web app is too big to fit inside of our layout. In such cases, overflow: auto can come in handy. But usually, this comes with the downside that users with browsers which do not show scrollbars by default (macOS or most mobile devices) might not be aware that it is possible to scroll...

Read more

Popup Overlays with Vue Router and Portal Vue

If we like it or not, modal dialogs and overlays are a recurring pattern on many websites and apps. In this article, we take a look at how to implement popup overlays with Vue Router so that they have a URL. We attach great importance to making our solution accessible so all of our users can use it without frustration. Also, we want to keep it simple but still create a reusable solution...

Read more

Dynamic Vue.js CRUD Applications

Often it seems like we build the same applications again and again. And at least sometimes it feels like that because indeed we do. Again and again, we build the same CRUD applications with their generic list views, edit forms, and previews. Throughout this article, we examine how to create a generic and reusable structure for a traditional CRUD application. Our primary goal is to keep our codebase DRY...

Read more