This article was originally published on The Road To Enterprise blog. Read it there for the best reading experience.

Nowadays, web applications are expected to be very fast since users often abandon websites that take too long to be ready. What’s more, slow websites are often penalised by search engines, such as Google. Therefore, it’s crucial for websites to load as quickly as possible.

Nevertheless, throughout my career, I’ve seen a lot of websites that loaded massive and unoptimised images, which were way too large and too heavy. …


Vue — The Road To Enterprise
Vue — The Road To Enterprise

After many months of writing and coding, I have recently released a new advanced Vue book called “Vue — The Road To Enterprise”. I have mentored many developers and teams, and one thing I often heard was that there are many resources for beginners to get started with Vue, but there is not a lot for those who are already familiar with Vue and want to advanced their knowledge to the next level. This is the reason why I decided to write this book.

What is in the book?

“Vue — The Road To Enterprise” is a book with more than 300 pages. It comprises…


This article was originally published on The Road To Enterprise blog.

With the introduction of Composition API, we got a new way of writing reactive logic, namely, ref and reactive methods. In this article, I want to show you how you can create a debounced ref that will update its value only after a specified delay. A denounced ref can be very useful, for example, if you have an input field with an autocomplete where an API request is made after the search query state changes.


This article was originally published at The Road To Enterprise.

Some time ago I have tried to use Vite for some of my tutorial projects. After setting up a project with Vite and creating a new component, I tried to import it the usual way I would do it when working with projects scaffolded with Vue-CLI, with the @ sign that resolves to the `src` directory. To my surprise, it did not work and I was welcome with this error:


This article was originally published at The Road To Enterprise.

Vue 3 has brought many new features, and the ability to use more than one v-model directive on the same element is one of them. I want to share with you a quick tip on how to handle updating the state of a parent component when using multiple v-models. It’s especially useful when dealing with forms. You can find the full code example in this GitHub repository.

For this example, we will use a form shown in the image below.


And Share Variant Styles Using Variant Style Provider

This article was originally published at The Road To Enterprise.

Many projects, especially larger ones, have a design system that serves as a guide on how components should look and feel. Let’s take buttons as an example. Below you can see a quick design for different button variants done in Figma.


Welcome to the first part of the series about “Vue — Going Serverless with Firebase”. Some time ago not many people would have thought you could create a whole application without having your own server and back-end architecture. However, today it is a reality, and, as an example, we will use Firebase. This series will consist of a few articles during which we will set up the Vue project with Firebase and create authentication logic as well as blog functionality. You will be able to create an app where the user can register, log in and create blog posts.

By…


This is a second part of the ‘Vuex — the enterprise setup’ in which you will see how to create a script to generate vuex modules automatically. If you did not read the first part you can find it here.

Let’s start with creating a new folder in our project directory called ‘scripts’ and inside it create a file ‘generateVuexModule.js’. If you don’t have Node.js installed then it’s time to get it on your machine. …


Vuex is the official state management library for Vue.js, with a really great documentation. In my opinion, it is much nicer to use than Redux as it requires less boilerplate code and supports async actions without any additional libraries. Moreover, since it is being developed by the core Vue.js team, it integrates with Vue extremely well. Unfortunately, sometimes it still might be a bottleneck for some to get the setup right. Vue.js core team member Chris Fritz has created a great boilerplate for Vue which you can find at https://github.com/chrisvfritz/vue-enterprise-boilerplate. It has a great Vuex setup which automatically registers modules…


There are great packages which let you create a dropdown list and use keyboard to control it. But what if you can’t use any package for that and need to implement a custom component with that kind of functionality from scratch? Fortunately, with Vue it is very easy to implement that and in this tutorial we will use Vue’s scoped slot feature.

First let’s get a simple project setup. We will use Vue-Cli 3 which now has a stable version. You can find more information about it at https://cli.vuejs.org/guide/creating-a-project.html#vue-create. …

Thomas Findlay

The author of “Vue — The Road To Enterprise” Get the book here — https://bit.ly/3bQenDx. Full-stack web and mobile developer and mentor at www.codementor.io

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store