Archive search

Find the stories you need

beginner

Show / hide password input values with Vue.js 3 and the Composition API

It's common to have the possibility to toggle the visibility of a password field on websites, applications etc. Implementing such a functionality with Vue.js 3 and the Composition API is simple and straight forward.

Refactoring Vuex with Map Helpers and Modules

Learn how map helpers and modules can make your Vuex code more organized, scalable and readable

Vue 3 Composition API: ref() vs. reactive()

Learn when to use ref() and when to use reactive() and why you should consider always using ref() instead of reactive().

Extending Vue Router Links in Vue 3

Easily handle both internal and external links in Vue 3 by wrapping the router link component in your own custom AppLink component.

Developing A Vue 3 Headless Component

What are headless components? And how can they be developed using Vue 3?

Rewriting Nuxt Hacker News with Fastify, Vite and Vue 3

Learn how to make a fast, maintainable Vue 3 app with Fastify and Vite.

How to easily sync with multiple v-models in Vue 3 using Composition API

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.

Oruga: the new kid on the block

In this article you'll learn how to use OrugaUI, a new lightweight library of UI components for VueJS without CSS framework dependency.

7 Vue Patterns That You Should Be Using More Often

A list of less-known tricks and patterns that can be useful across different use cases.

Learn Vue.js 3.0 With Tailwind CSS And Composition API in 2021 - Create A Pokémon app For Beginners

If you still feel overwhelmed at the thought of using the Composition API in your Vue apps, here is a pretty straight-forward introduction to it, along with Tailwind CSS.

Creating Redirects With Nuxt

In this post we'll dive into the different ways you can create redirects with Nuxt.

How to use Nuxt components inside Storyblok Rich-Text editor

Find out how to add components directly in the Storyblok's Rich-text editor and how to create their implementation in Nuxt.

Caching Vue Refs

Introducing self-managed-caching on server-side and client-side has a lot of benefits and can help you out when you need atomic control over your data.

Automatically import SASS/SCSS into every Vue.js component

Have you ever wanted to import SCSS files into every Vue.js component automatically? This article will show you how to do so with Vue CLI 4, 3, and 2. Keep in mind though, that you should only do that for Sass shared functions, variables and mixins, otherwise you would end up with lots of duplicated code.

Renderless Dialogs (Alert, Confirm, and Prompt) in Vue

Make a flexible, customizable, potentially pretty, and functional replacement for alert(), prompt(), and confirm() in Vue.

Non-reactive Objects in Vue Composition API

Exploring scenarios where you don't actually need Vue's reactivity, and why you should use the composition API to opt in when needed.

Language Aware Nuxt.js Routing

Looking for a solid way to combine i18n and language-based routing in Nuxt.js? Make sure to read this article as it covers several ways to make that integration as seamless as possible.

Creating a Nuxt Module

Modules are functions that are called sequentially when booting Nuxt. The framework waits for each module to finish before continuing. In this way, modules can customize almost any aspect of your project. Let's create a module that uses ngrok to get a Public URL that you can share while working in Development.

Using Nuxt Content with a JSON File

With the recent introduction of Nuxt Content, we can now create complete applications using content from JSON files with Nuxt. This blog post shows how this can be used to extend static pages with data, create dynamic pages, and also dynamic navigations.

Code Coverage for Vue Applications

Learn how to instrument an application's source code and collect code coverage information to guide end-to-end test writing.

Creating UI components based on a Design System in Vue.js

Don't you know the benefits of using a Design System? Not sure how to structure your Vue.js components in an app? Read the article and find it out.

Handling Asynchrony in Vue 3 / Composition API — Part 1: Managing Async state

Composition API makes a lot of things easier but it also brings some challenges as some things need to be rethought regarding how they fit into this new concept and it might take some time before the best practices are established. I'll try to shed some light on possible options.

How to Emit Data from a Slot

You know how to pass data into a slot by using scoped slots, but how do you communicate back?

Understanding Slots

Slots are one of the most powerful concepts in Vue.js — but also one of the most confusing. In this video taken from my upcoming course, I take a different approach to explaining and showing how slots work.

Improve Your Developer Experience With Nuxt Components

Explore how you can import and register Vue components automatically using @nuxt/components module.

The 6 Levels of Reusability

In this beginner-friendly article, Michael Thiessen explains how to reduce code duplication through smart component design that focuses on reusability.

Create a Blog with Nuxt Content

The Content module is a git files based headless CMS that provides powerful features when it comes to write blogs, documentation sites or just adding content to any regular website. In this post we will go through most of the benefits of this module and discover how we can create a blog with it.

Going dark with Nuxt.js color mode

The @nuxtjs/color-mode module is a cool way of adding dark mode to your site. But not only does it switch from dark to light but also any color theme (eg. sepia mode). It even has auto detection so that it will choose the right mode depending on your system appearance.

How to test custom prop validators in Vue.js

In the article, Rolf Haug (co-founder of Vue School) will show you how you can test props and custom prop validators in a simple and performant way, without spying on the console error.

Writing a Vue component using TDD: a gentle introduction

In this tutorial, you'll learn the basic concepts of Test Driven Development (TDD) building a simple Vue.js component with TypeScript, using Jest for testing and setting up coverage and Continuous Integration with TravisCI.

The Vue 3.0 Upgrade Guide

While we're all waiting for an official Vue 3 documentation, Gábor Soós gathered a list of the biggest breaking changes along with a quick migration guide. Sure, if you used custom v-model configuration and relied on hand-written render functions you might still want to take a look at the RFCs.

Introducing Vite, the Fastest Dev Server Ever

Check out this tutorial on how to build a Storybook clone utilizing the "fastest dev sever ever" aka Vite!

Automatically Generate your Vue Router Configuration with vue-auto-routing

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. Learn how to use the vue-auto-routing package to automatically generate the router configuration based on the directory structure.

Building an animated COVID-19 tracker using Vue.js

Did you know that you can use Vue.js to create interactive, animated visualisations using SVGs? This is the first part of a two-part mini-series which will explore how you can do just that, by building an animated COVID-19 tracker.

Example of Using a Watcher

Here’s a pretty smart approach on how Vue’s watchers can be used to simplify the browser’s focus management when adding keyboard control to your components. In this case a navigation component that can be controlled with the arrow keys.

What you will love in Vue 3

Prepare yourself for what to expect in Vue 3 with Alex Kyriakidis' presentation from the Vue.js Amsterdam conference.

How the Vue Composition API Replaces Vue Mixins

Looking to share code between your Vue components? If you’re familiar with Vue 2, you’ve probably used a mixin for this purpose. But the new Composition API, which is available now as a plugin for Vue 2 and an upcoming feature of Vue 3, provides a much better solution.

How Storefront UI solves website accessibility issues with custom directives

A Storefront UI developer describes how custom Vue.js directives were used to solve accessibility issues for websites.

Vue.js and dialogs

Here’s an interesting approach to handling modals or dialogs in Vue. The approach differs from the typical props in / events out pattern and instead suggests you treat the dialog as a promise that can be either resolved or rejected depending on the user choice.

Stateful Styles With Tailwind and Vue

Vue and Tailwind enable for some helpful patterns when dealing with state-driven component styling. This post walks through a few of those patterns.

Deep dive into Vue state management

Explore the many approaches to state management with Vue.js in this deep dive article by Filip Rakowski.

#32: Deep vs Shallow Rendering in Vue.js Tests

A short article on how to use deep and shallow rendering in Vue.js and what I suggest to use most of the cases using vue test utils.

Vue 3 Reactivity - Learn Composition Functions API

Another great article on the upcoming Composition API, this time touching on how it might affect building animated interfaces. Check it out!

How to Build Vue Components in a WordPress Theme

Progressive enhancement is a feature of Vue that is not mentioned often, yet is one of the biggest strengths of the framework when it comes to adoption in large, already existing applications. It opens the way to progressively introduce Vue into your stack (even one page at a time without an additional build step) without having to rewrite the whole app at once. In this article, you can learn how to do that with a WordPress theme.

Building a Reusable Pagination Component in Vue.js

In this course, we'll be building a reusable Pagination Component. It will let the user: select the number of results per page; navigate to pages both directly and with 'next' and 'previous' buttons, and track their queries between page reloads via query params.

How To Build A Plugin With Gridsome

In this tutorial, we go through the process of building a Gridsome Source Plugin for ButterCMS from scratch. Gridsome allows us to fetch data from local files or external APIs and headless CMS and store the data in a GraphQL layer that lets us extract only the data we need and use it our Vue.js components.

#31: Create a i18n Plugin with Composition API in Vue.js 3

A example on how to use the inject and provide functions to create a i18n plugin using Composition API in Vue.js 3.

Binding CSS Variables in Vue

CSS variables are awesome – if you don't have to support IE11, that is. This article, neatly written by Shayne, will show you how to do CSS variables binding in Vue and why it can be useful, with examples and all. Great stuff if you ask me.

How to Create an Animated Countdown Timer With Vue

Have you ever needed a countdown timer on a project? For something like that, it might be natural to reach for a plugin, but it’s actually a lot more straightforward to make one than you might think.

Refresh-Proof Vue Forms with Local Storage

Have you ever accidentally refreshed or closed your browser tab while filling in a rather long form, just to lose all the progress? Instant frustration! But you can save your users from that by refresh-proofing your forms and in this article, Marina Mosti explains how to do it.

The Last Damn Vue ToDo App

I’d hope the last time was the last time, but here we are with yet one more ToDo App tutorial. Last one, I promise! This time Raymond is trading the indexedDB implementation for a Firebase/Firestore database including creating users. Which means, your ToDo app can be finally be used on multiple devices.

How to write a Vue.js app completely in TypeScript

Want to build a Vue.js app in TypeScript but don't know where to start? This tutorial demonstrates how to build a new TypeScript app using Vue CLI.

Nuxt.js UI Component Libraries with Buefy And Ant

You can use Nuxt.js with all kinds of Vue component libraries. In this video, Erik goes through both Ant and Buefy.

Yet Another Damn ToDo App in Vue.js

Yet another tutorial by Raymond Camden. And a ToDo app. Haven’t we had enough of those? Maybe, but this one comes with a nice twist – it shows how to nicely integrate IndexedDB with Vuex and this alone makes it a worthwhile read!

Vue Testing Handbook

Most likely the go-to place for everything related to unit-testing in Vue! This includes a guide on how to test Vuex and even the upcoming Composition-API. Amazing work by Lachlan Miller!

An Overview of Vue Keep-Alive

When using dynamic components or even when toggling components using v-if, Vue’s Keep-Alive abstract component and prove super helpful as it will automatically keep the state of that component when it is being removed from view. This way, when the component comes back, it will still have that state.

Vue Testing Crash Course

Here’s a lengthy article that makes for a nice introduction to writing tests for your Vue components.

Vue.js Performance - Optimizing third-party libraries

Vue.js is generally very performant and small, but that might not be true about all the other packages that you use in your app. In this article, Filip Rakowski explains how to define a performance budget, compare how different libraries affect the performance and load time (using Bundlephobia) and optimize your imports.

Vue-router — props — 1/2

Here’s a short article with a few useful tips to working with Vue-router and component props. Did you know – for example – that you can automatically transform things like this.$route.params.id into an id prop? Read the article to learn how!

Portal - a new feature in Vue 3

Have you played the Portal game. There’s a similar concept for web frameworks, where you are able to teleport a component to a different location in the DOM? This is especially useful for modals (so it’s easier to manage things like z-index). Did you know we will likely get those in Vue 3.0 built-in? But until then, check out the portal-vue library.

#30: Access template refs in Composition API in Vue.js 3

Quick tip on how to access the old this.$refs by using ref() in the new Composition API in Vue.js 3 components.

Create a lazy-loading image component for faster Vue.js apps

Another nice article from Austin. This time, he explains now to build a replacement component for the HTML element that lazy-loads the images which in turn makes your app faster. Smart way of using the intersection observer.

How to Load Third-Party Scripts in Nuxt.js

If you use Nuxt.js you might have stumbled upon this problem – how to add links to third-party scripts that you can’t install with NPM. For example some analytics solutions. Or what if you need to add those to certain routes only? Alex provides all the answers in this article.

20 Nuxt Modules (with Tips) to Increase Your Productivity and Build Web Apps Faster

Nada Rifki has written down a list of her 20 favourite Nuxt.js modules that she recommends for most Nuxt users. Along with the list, there is a short description of what it does and a few tips along the way.

Building animated draggable interfaces with Vue.js and Tailwind

Here’s a nice tutorial on building a drag-n-drop list with some pretty neat animations. To build that, Cristi uses Vue-Draggable and TailwindCSS.

CSS Modules in Vue.js

Part three in a series of articles about working with CSS in Vue.js, focusing on using CSS Modules in Vue.js.

#28 Easily switch to Composition API in Vue.js 3

A step by step guide on how to migrate a Vue.js component from the traditional Object API to the modern Composition API, easy and in a cheatsheet format.

The Most Important Feature in Vue

I've said it before and I'll say it again: Computed properties are the most important feature in Vue. Sure, scoped slots let you create some nice abstractions and watchers are useful too. But I don't think anything comes close to how valuable computed props are.

Creating a Pinterest style image gallery in Vue

Pinterest has a very specific way of showing the gallery and here’s a tutorial to show you how you can build it in Vue using the Unsplash API to get some sample images.

Reusable Functional Vue.js Components with Tailwind CSS

Tailwind CSS is a hot topic right now in the Vue community not without a reason. It’s super flexible and easy to use. Check out this new article by Markus. It includes a very useful trick on how to make sure PurgeCSS won’t remove some of your dynamic CSS classes. Good read!

Reducing Redundant Repetition

Another great article by Michael, who I finally had a chance to meet at VueConfTO a few days ago. This week, he writes about extracting repeatable code and what to look for when building abstractions.

Hello Vue 3: A First Look at Vue 3 & the Composition API

In this video tutorial, Dan Vega is building two versions of a small application – one with Vue 2.x and the other one with the alpha build of Vue 3.0, using the Composition API.

Theming using CSS Custom Properties in Vue.js Components

This new VueDose tip from Cesar Alberca tackles exactly what the title says: Theming using CSS custom properties in Vue components. A bit longer than usual, but if you want to create super generic, flexible and yet robust components, it’s still worth a read nonetheless.

Setting up Tailwind CSS with Vue.js

Tailwind, the utility-first CSS framework, is taking the front-end world by storm (Get it? Wind+storm? OK, I'll see myself out), and it only makes sense to combine its power with Vue's. This article from Markus Oberlehner guides you through exactly that: Setting up Tailwind to work with a Vue CLI powered application.

10 Good Practices for Building and Maintaining Large Vue.js Projects

Nada Rifki lists down the top best practices she's developed while working on Vue projects with a huge codebase, ranging from slot usage and Vuex store organization to git commit message convention and package version freezing. Will they all be applicable for the application you're working on? Maybe, maybe not. Are they good food for thought, though? You bet!

Scrolling Shadows with Vue.js

If you're not familiar with the term, scrolling shadow is the technique to add shadows to an element to make it clear that the element is scrollable – something that might not be that obvious on e.g. a mobile device. This article from Markus shows how to write a Vue component to achieve just that.

The most modern Pie Chart component using CSS Conic Gradient and Vue.js

Conic Gradient is a pretty new addition to CSS and among other things, it allows us to build a pie chart. This is made especially easy with Vue’s dynamic style binding.

Popup Overlays with Vue Router and Portal Vue

Most apps introduce modals at some point. It’s usually controlled by the internal state of the parent component or from Vuex. However, what if we want to persist the fact that the modal is open even when the page is reloaded? In that case, we got to tie it to the URL and thus to the vue-router. Read this article to learn how.

Build a movie search app using the Vue Composition API

Here’s another tutorial on how you will be able to use the Composition API. Here, Gábor Soós builds a simple movie search app.

Cropping images with Vue.js and Cropper.js

Cropper.js is a powerful library that handles image cropping of images. In this tutorial Víctor Adrián is showing how you can use it with Vue.js.

VueJS: Up and running with the Vue CLI 3

If you are just starting and you are looking for an introduction to using the Vue-CLI, Dan Vega has you covered with this video tutorial.

Unit Testing in Vue: Your First Test

New to testing? Check out this quick intro to unit testing Vue components with Jest by Dan Vega.

How to integrate Infinite Loading with Gridsome

Infinite loading is an alternative strategy for loading additional nodes/content onto a page without the use of traditional pagination. Infinite loading instead loads the next batch of content when a user scrolls to the bottom of a web page.

#25: The most modern Carousel component using CSS Scroll Snap and Vue.js

Here’s a pretty neat tutorial on how to build a carousel component with Vue and a new CSS property called scroll-snap.

Why the Composition API - Vue 3 Essentials

The killer feature of Vue 3 is the Composition API, but why exactly is it needed and what problems does it solve for us? — Gregg Pollack answers this question in this well visualized introduction to the new API.

Unit Testing in Vue: What to Test?

We've definitely covered unit testing in Vue in the past, but there are always more to learn, especially when you're new to the topic. This time, Dan from VueMastery answers some of the most important questions when it comes to unit testing:

  • Why should we write tests?
  • What should we (not) test?
  • What tools are available out there?

Before you ask, this is only the beginning of a series, so make sure you follow it though!

15 Must-Have Vue Directives That Will Significantly Maximize Your Productivity

From input masking to a clipboard helper, from tooltips to dummy texts, here come the 15 ultra useful Vue directives to aid you in the next project, neatly collected by Nada Rifki. Know one that's not listed? Well, we await your PR at awesome-vue 😉.

Four Ways to Pass Data from Laravel to Vue

People say Laravel and Vue are a match made in heaven, and I wholeheartedly concur. After all, both are super beginner-friendly, come with the most elegant syntaxes, and have some of the best documentations out there! That said, one of the most asked questions when developing with this combo is how to pass data from Laravel to Vue. In this article, Andrew will give you the answer – I mean answers.

Gridsome Vue-Remark Tutorial

Using Vue components inside markdown files is a new feature of the recent Gridsome version. Which is something that can be extremely useful for every kind of tech writing but not limited to. Here’s a video tutorial series that shows how to use it.

Powering up static sites with Gridsome taxonomies

Have you heard about Gridsome? A static page generator for Vue.js powered by GraphQL. I just recently used it to create my own blog and it’s been a pretty amazing experience. However, the GraphQL part can feel a bit steep at when you are just starting, so you might want to check out this article by Núria Soriano that explains that part really good.

Dependency Mocks - A Secret Weapon for Vue Unit Tests

If your Vue single-file components have dependencies, you'll need to handle those dependencies in unit tests. In this article, you'll learn how to mock dependencies in Jest by replacing them in the component's dependency graph.

Using Scoped Slots in Vue.js – VueDose #23

VueDose is back after the summer break with a new tip. This time it’s a super short introduction to scoped slots.

How to Target the DOM in Vue

Accessing the DOM directly is often considered an anti-pattern when working with Vue.js. However, sometimes it’s a necessary thing to do and it’s important to do it correctly to avoid potential problems. Read this article by Marina Mosti to learn how to do it properly and when not to do it at all.

Building a VueJS screencasting app from scratch

If you enjoy watching other people build an app and explaining what they are doing along the way, Jeffrey Biles has just started a series of videos where he builds a Vue-based screen-casting application.

Knowing What To Test - Vue Component Unit Testing

Here’s a pretty good article on how to approach unit testing of Vue components. One advice that I really liked was "Don't go beyond the boundaries of the input and output (of a component)". This encourages us to treat the components as a black box, where the internal logic is just a mean to give a certain output to a given input.

Tips for Vue Developers Picking Up NativeScript

Just got started with building native mobile applications using NativeScript and Vue? Here’s a great article that will help you pick up some of the most useful plugins (from the NativeScript Marketplace) and point you to other learning materials to get you up to speed.

VuePress: Documentation Made Easy

An amazing article by Ben Hong on how to build a great documentation starting with the right approach to the technical details of using VuePress efficiently. I’m saving this one for later and I will most definitely use it the next time I work on docs.

Vue.js for Angular Developers

If you’re coming from an Anguler background or have some friends that do, you might be interested in this article. It walks you through building a ToDo application while at the same time, the author compares how different Vue features/patterns have their matching equivalent in Angular.

How to load dynamic images in Vue and Nuxt with ease

Importing images from the assets folder when the path is static is not that difficult in both frameworks, Vue and Nuxt.js. But loading images with dynamic paths often confuses developers that are fairly new to one of these frameworks. In the following article, I want to demystify the process of dynamic image loading in Vue and Nuxt, and explain why static images can be loaded easily and what to do when the path has to be dynamic.

Learning Vue as a React Developer

Both Vue and React share many similarities and solve same problems, but often approach those in different ways. This article highlights those differences. If you have some friends that use React and would like to learn a thing or two about Vue – show it to them.