Building Advanced Vue.js Applications

If you’re used to working with Vue 2 $refs and switch to the Vue 3 Composition API, you might wonder how to use $refs inside the new setup() method. In this article, we find out how to use the new ref() function as a replacement for static and dynamic HTML element references...

When naming your (Vue.js) components, you might sometimes be worried that the names are getting very long. In this article, we take a closer look at how long is too long and what are the most important best practices when it comes to naming your components...

The React Context API provides a way to share properties that are required by many components (e.g., user settings, UI theme) without having to pass a prop through every level of the tree (aka prop drilling)...

When designing very large JavaScript applications, you have to be very careful about how you structure your dependencies. One particular example of this is the `router.js` configuration file...

When building apps that rely on data from an API, two things are essential: we want our data to be fresh, and we want it fast. The stale-while-revalidate caching pattern helps us to strike a balance between both...

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...

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...

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...

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...

The data model approach builds on the idea that you have a separate Vuex module for every data model of your application (e.g., users, posts, comments). Following this pattern makes it very straightforward to structure your Vuex store. But there are also some problems with a pure data model paradigm...