Archive search

Find the stories you need

tutorial

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

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.

Build Advanced Components in Vue 3 using $attrs

In this article, we are going to cover the $attrs attribute. We will explain what it is used for, how its implementation differs from Vue 2's (former $attrs, class, @listener), and build a code example to help understand its power.

API Factories for Vue.js & Nuxt

How are you organizing your API calls? Have you considered API factories to make your codebase easier to work with, increasing your team’s productivity?

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.

Introducing Component Testing with Cypress

Component Testing in Cypress is a new feature coming up in Cypress 7.0 and is potentially a game-changer for writing component tests (both small units and larger interface tests). In this video, Lachlan shows how you can use it with Vue.

Vue Enterprise Patterns - How to Build Components With Design System Variants And Share Variant Styles Using Variant Style Provider

Explore Vue Enterprise Pattern and take advantage of CSS variables and CSS modules to create Vue components with variants based on a design system and provide variant styles using the Variant Style Provider component.

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.

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.

✨ Inclusive components: making modals accessible 🧑‍🦯

At first sight, modals seem like a pretty straight-forward thing to build. However, if you care about accessibility (and you should!) it gets quite a bit more complicated. Here’s a great article explaining how to make your modals truly accessible.

Creating Redirects With Nuxt

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

How to drastically reduce your bundle size and load time in Vue.js

Performance is one of the most important aspects when it comes to web applications. Here's how we reduced the bundle size and load time of our Vue.js app.

Events and Callbacks: Parent/Child Component Communication in Vue

Did you ever run into problems because you forgot to update an event handler when renaming a custom event or changing the data it emits? Callbacks can solve this, but is it a good idea to use callbacks in a Vue app? Learn why callbacks are considered an anti-pattern in Vue and when to use callbacks instead of events in Vue.js.

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.

Building a Vue Auto Component Importer - A Better Dev Experience

Another article by Harlan Wilton, where he dives into webpack loaders to explain how you can build a loader that will allows for automatic component resolution at compile time.

Building Vue.js Applications Without webpack

Are you sometimes fed up with installing hundreds of megabytes of dependencies before you can get started building a Vue application? In this article, we learn how to build Vue applications without webpack or a complicated build toolchain.

Type-safe Vue.js Injections

This is a short article on what you can do with provide/inject TypeScript support in Vue 3 and @vue/composition-api library for Vue 2.

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.

Automatic Dependency Injection in Vue with Context Providers

Learn how to implement Automatic Dependency Injection in Vue.js with the Context Provider Pattern.

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.

Building a data layer with Vue and Composition API

An interesting article that explains how to build the data-layer for your Vue applications using the Vue Composition-API.

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.

Writing a vite plugin

With Vue 3 recently reaching release candidate stage, it’s a great time to dive in and give it a try. To get started right now you’ll need to use vite, the new web dev build tool from the creators of Vue. Vite offers a new plugin system for extending vite’s capabilities. Today we’ll take a look at setting up a simple vite plugin.

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.

Build better higher-order components with Vue 3

Learn how to leverage the composition API to build better higher order components in Vue 3

Build file-based theme inheritance module in Nuxt

Learn how to build a theme inheritance module in Nuxt.js. A perfect module for when you want to change parts of your codebase for special campaigns such as Black Friday or the holidays sales.

Be prepared to migrate your Vue app to Vue 3

In this post, I would like to share my recent experience of trying out Vue 3 beta version, specifically regarding some caveats you might want to note if you are planning to migrate your existing Vue 2 application to the upgraded version, Vue 3!

You Might Not Need Vuex with Vue 3

By using the reactivity system and the dependency injection mechanism of Vue 3, we've gone from a local state to centralized state management that can replace Vuex in smaller applications.

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.

Migration Guide - Vue.js Docs: Beta Version

The RC-stage is the perfect opportunity to make oneself familiar with the migration process from Vue 2.x to 3.0 so that you can start planning on upgrading your apps.

Improve Your Developer Experience With Nuxt Components

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

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.

Testing Vue+Apollo: 2020 edition

Testing Vue components is usually pretty straightforward until those components start depending on other packages. Like Apollo’s GraphQL. Here’s a new take on testing this stack written by Natalia Tepluhina.

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.

Separating Core Logic and Framework Integrations

Write a simple useForm composable to integrate a framework-agnostic form validation library with Vue.js 3.

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.

Context and Provider Pattern with the Vue 3 Composition API

Learn how to use the Vue 3 Composition API to replicate the React Context and Provider API.

How to build a Jamstack multi-language blog with Nuxt.js

As Jamstack is getting increasingly popular, there are some areas where we're still learning new things. One of them is adding internalization support. Learn how to do it using Nuxt and Strapi CMS.

Create Your Own Vue.js From Scratch - 5 Parts Story

Have you ever wanted to write your own framework? In this cycle of articles you can learn how to apply features that you know from Vue.js from scratch, including a reactivity system and a virtual DOM.

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.

How to create dynamic forms with custom validation in Storyblok and Nuxt.js

If you already know the basics of Storyblok and Nuxt, see how you can use Storyblok fields to write dynamic forms components in this hands-on tutorial. It also showcases how you can use Vuelidate’s dynamic validation rules to validate a dynamically generated form.

Vue 3: Data down, Events up

In the latest article from Vue Mastery, Thorsten Lünborg explains how to take advantage of data binding in Vue 3, using good old options API.

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.

Quasar and Browser Extension Development - Getting BEXy

A series of articles that demonstrate Quasar's new BEX mode, that makes it easy to build Vue-based browser extensions.

Stale-While-Revalidate Data Fetching Composable with Vue 3 Composition API

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.

Learn how to use the Vue 3 Composition API to build a data fetching composable implementing the stale-while-revalidate pattern.

State Management with Composition API

The Composition API (and other Vue 3 APIs) simplifies a lot when it comes to state management. Learn how the Composition API has changed the way I manage my application state.

Vue 3 Composition API with Filip Rakowski

The Composition API is coming to Vue 3 - but some companies, such as VueStorefront, have been using it for a while with the Vue 2 Composition API plugin. Filip Rakowski, co-founder of VueStorefront, is here to explain the Composition API and how they’ve used it in the next version of their e-commerce framework.

Quasar and Apollo - Client State without Vuex - Part 1 - Scott Molinari

In this 4 Part article series, Scott Molinari, team member of Quasar Framework, writes about how Apollo's client state management system can replace Vuex. To demonstrate this, he built a ToDo app with the Quasar Framework.

Clean, Scalable Forms with Vue Composition API

Forms are one of the trickiest parts of frontend development and where you'll likely find a lot of messy code. In this tutorial, you'll see how the new Vue Composition API will make your form code much cleaner and more scalable.

Vue Skeleton Loading Screen using Suspense Components

Skeleton loading screens show a content outline while waiting for data to load - providing a great user experience and making load times feel shorter.

Controlled Props Pattern

There are a few instances where you want to be able to override the internal state of a component and force it open from the parent. The controlled props pattern is designed for exactly this situation.

State Management Without Vuex

What if you wanted to manage state, but you didn't want to use Vuex? Don't get me wrong, Vuex is a great tool. But it's not ideal for every use case.

Build A Drawing App with Vuejs and Html5 Canvas

In this tutorial, we will be building a simple drawing app with Vue.js and Html5 Canvas.

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.

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

Markus Oberlehner is back with another great article on using the context.payload param in your asyncData. This especially important if you are using the "static generator" functionality of Nuxt along with dynamic routes. Combining those functions allows you to preload the data that would normally be loaded inside asyncData during build step.

Vue.js Functional Components

Another article by Frederik Dietz, this time about functional components. A great technique to know, though keep in mind that the template-first approach to functional components will be obsolete in Vue 3.0. You might want to focus on learning how to use functional components with JSX though!

Vue.js Headless Component

A renderless component (or like in this case called "headless components") is a powerful pattern that utilizes scoped slots to encapsulate functionality while not pushing for any specific UI solutions. Definitely something to be picked up by every Vue developer. At least until composition-api becomes widely available.

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.

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.

The Ultimate Nuxt API Setup

Although Nuxt ships with a built-in connect-based Node server you can replace it with any solution that you’d like and use Nuxt only as a rendering middleware. In this article, Jonas Galvez explores a setup where he uses Fastify to build the API part of a Nuxt app.

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.

Recreating Vue 3 Reactivity API (roughly)

An article inspired by the talk Jason Yu has given last year that shows how to build a Vue 3.0-like Reactivity API. The difference though, is that in this attempt Jason is actually using TypeScript (unlike during the talk). Really good read!

Vue.js 3 Course - Composition API, TypeScript, Testing

Vue.js 3 gives us two new tools - the Composition API and first class TypeScript support. In this screencast, we refactor the News component, which is written in JavaScript and the Options API, to TypeScript and the Composition API. We see and discuss the trade-offs, and try to decide which language and tool is more appropriate for the job.

Using State Machines in Vue.js with XState

While state machines used to be an obscure model for the front-end world, it has gained quite some traction lately, mostly thanks to XState. Instead of defining imperative UI flows, and lose track of their logic, state machines make them first-class citizens by letting you model them decoratively. They’re the closest thing to an actual flowchart, which is how a product manager or a UI designer would likely design the experience of a product. XState works within any JavaScript and TypeScript project, including Vue.

Data Fetching Using Vue Hooks

Composition API (sometimes referred to as "hooks," though we'd discourage using this name to avoid any confusion with Instance Lifecycle Hooks) is certainly one of the most anticipated new feature in Vue 3, if not the most anticipated itself. In this article, Darren takes the most commonly-seen feature of a web app – fetching data – and shows us how it can be written with composition API, additionally with the use of swrw.

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.

Vue.js Functional Base Components Powered by CSS Modules

Learn how to automatically create functional Vue.js components from CSS Modules with dynamic props for modifier and state classes.

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.

Vue 3 Testing Framework from Scratch

UI Libraries like Vue and React and their Testing libraries, Vue Test Utils and Enzyme, can seem like “magic” sometimes. To remove this magic and see exactly how a test framework works, let’s build a simple unit testing framework for Vue.js 3, from scratch. Will will see that testing frameworks are just simple wrappers that provide an abstraction around basic usual DOM APIs.

Editable interfaces with Vue.js and Tailwindcss

Being able to edit (content and design) a "live" website could be considered the dream of many marketing specialists. But that’s easier said than done. Here’s a lengthy article and a live demo on how you can build something like this yourself!

Improved accessible routing in Vue.js

Here’s a great write-up on how to improve the accessibility when using front-end routing. The author also links to accessible-app – a project that aims to collect accessible patterns and demo implementations (in Vuejs!) to certain frontend problems like modals or dropdowns. You can also contribute new patterns to it!

Introducing VueScreencasts

Jeffrey Biles has been producing free Vue.js screen-casts for a while now and just now he released his VueScreencasts platform, where you can watch all of his tutorials (over 19h) for free!

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!

Vue Apollo v4: the first look

Are you a fan of GraphQL and Apollo? Here’s a quick look into the upcoming Vue-Apollo v4.0, which introduces the ability to work with Apollo using the Vue 3.0 Composition-API. To showcase the new API, Natalia is migrating an app that uses the previous version of Vue-Apollo (v3) to the new syntax.

Vue Testing Crash Course

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

Lazy Resolving Observable API Services with Vue.js

Another interesting article by Markus Oberlehner. This time, Markus shows us how to build a lazy API service that allows us to automatically fetch resources that we need, but only when we need them based on actions like scrolling into view.

Accessible form error auto-focus with Vuelidate in Vue

Looking for an easy way to improve the user experience of your forms? And make them more accessible as a bonus? In this article, Marina Mosti shows a technique that helps with all that by communicating errors to screen readers and auto-focus fields with errors when you try to submit a form. Pretty neat!

Off Main Thread Architecture with Vuex

Such an interesting article! Have you thought about moving parts of your Vuex store to a web worker and thus off the main thread? This could improve the overall performance of your application, especially if you execute some expensive, blocking tasks in your store. Check out the difference between the demo pages in the article.

Vue.js With TypeScript A Beginners Guide

TypeScript and Vue are a great combination, but how do you use it? In this video I'll discuss how to use TypeScript and Vue with Vue.extend and look at the class component architecture.

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

Here’s the 2nd part of the series focused on building reusable factories for Vuex store modules to reduce repeatable code. In this part, Markus shows how you can create a "feature" module factory that helps you consume the data stored by the "model" modules. Interesting read!

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.

Vuex Data Model and Feature Module Strategy Part 1: The Data Model Module

Looking for a way to reduce some Vuex boilerplate for repeatable functionalities? Standardize how you manage data in your app? Markus has some pretty nice ideas on that and more! Check it out.

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.

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.

Production-ready Vue SSR in 5 Simple Steps

Usually when working with SSR in Vue, developers opt to use one of the frameworks on top of Vue: Nuxt.js, Quasar or Gridsome. However, sometimes you might need to build a SSR solution yourself. This does require some more work on your end though. This article gives a nice introduction on how to set up a production ready SSR project. For more information, take a look at the official SSR guide.

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