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.
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...
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...
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...
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...
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...
One of the main concerns I have when building Vuex-based applications is the tight coupling of components with the Vuex store that seems inevitable when using Vuex. Ideally, I want to be able to switch the data layer of my application at any time without having to touch all my components that rely on data from an external resource...
If you are a regular reader of my blog (thanks to all of you), you may have noticed that many of my articles are about decoupling components from their dependencies. Over the past few months I have written a few articles on this subject. But today I share with you an additional way to inject dependencies into Vue.js components that I find very interesting: dependerncy injection via functional components and component props...
Today we look at how we can design a system for easily creating generic Vuex modules for typical CRUD content types. Often when creating applications rather sooner than later we catch ourselves repeating the same boilerplate code over and over again because most of our content types are very similar at their core...
Listening to one of Full Stack Radio's latest episodes, I was very impressed by the expertise of Matt Biilmann, CEO of Netlify. Adam Wathan and Matt talked a lot about how global state is handled in the Netlify web application. Although the Netlify app is built with React and Redux when he spoke of his philosophy for structuring the global state of the app, it motivated me to think a little more about this topic in the context of Vue.js and Vuex...
I absolutely love the concept of reactive computed properties in Vue.js. So much so that I miss them in situations where I don't have them available. In this article, we will explore how to create reactive data models with all the features of regular Vue.js components such as computed properties...