Archive search

Find the stories you need

advanced

Problems With Server-Side Plugins in Nuxt.js

In this article, Josh Deltener explains one of the gotchas when writing server-side rendered apps. Though he mentions plugins, the reality is, everything that you declare as global (outside of the function scope) will most likely persist on the server and can leak to other users. You can read more about this behavior on Vue’s SSR docs.

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?

Comparing the New Generation of Build Tools

A bunch of new developer tools have landed in the past year and they are biting at the heels of the tools that have dominated front-end development over

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.

Building large projects with Vue, Vite and Lerna

A topic that isn’t often covered – application architecture / file structure of large Vue projects. In this post, Tomasz explores an app architecture based on Lerna (mono-repo) that highly favors using separate packages for different parts of the app. Super interesting approach, that I would love to see in action.

Write Vue like you write React

A short article that showcases how Vue with Composition-API and JSX compares to React with hooks. If you have some React friends that are big fans of React hooks that you want to convince to give Vue a try, you might show them this!

vno: a vue / deno love story

Deno is a new runtime for JavaScript and TypeScript. Since you can’t use it directly with Vue-CLI (which requires Node.js), the community has created vno, a CLI tool for Deno to compile and bundle Vue single-file components. Impressive!

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

Invalidating Computed with The Composition API

There are cases where you want to invalidate a computed prop you created and re-evaluate its value, this happens often if the computed prop uses non-reactive parts.

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.

Deep dive into the new zenith-watches.com

That one isn’t really all about Vue, but is an interesting piece nonetheless. The author explains the whole architecture of the new Zenith website, their usage of Vue-Storefront, and how it all works together.

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.

Vite 2, a DX jump into the future

Here’s a great summary of all the new things coming with the new Vite 2.0 release! And if you’re interested in some extra bits of Vite’s development, you might want to (if you haven’t already) follow Evan You on Twitter!

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.

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.

Automatic Dependency Injection in Vue with Context Providers

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

From Vue to Nuxt: Server-side rendering in a nutshell

Server-side rendering has been here for a while now and thanks to frameworks like Nuxt.js, making use of it is easier than ever. But do you fully understand how SSR works underneath? Here’s an article that can help with that!

Group, Extract, Share: Working with the Vue Composition API

The Vue 3 Composition API enables us to extract and share stateful logic between components. In this article, we learn how to extract and share logic to build flexible components with the Vue 3 Composition API.

Nuxt SSR Optimizing Tips

Learn about the difference between server-side and client-side rendered optimization, and how to optimize your Nuxt SSR applications for optimal performance.

How to build a TWA Android app out of your Nuxt.js PWA

Did you know that you can package your progressive web app (PWA) in an Android app and publish it on the Google Play Store? Well, you can. This way, mobile users will be able to find it and download it, and everything will behave like in a native application. Personally, I wasn’t aware of this until I came across the TWA acronym, which means: trusted web activity.

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.

Diving into the Virtual DOM

Dive in and explore Vue's Virtual DOM with a recursive algorithm.

Nuxt Composition API

Learn which challenges the Composition API brought to Nuxt.js, and which posibilities we got when the Nuxt team released the powerful @nuxtjs/composition-api module.

Watch with @vue/reactivity

A brief intro to how the Vue reactivity system works and a guide to implementing the (missing) watch on your own.

Mastering Browser Cache

Filip Rakowski (co-founder of Vue Storefront) shares how you can improve a Vue app's performance by mastering browser cache.

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.

Build better higher-order components with Vue 3

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

Tight Coupling vs. Loose Coupling in Vue.js

When talking about loose coupling and tight coupling, often, the impression arises that tight coupling is something we always have to avoid. But this is almost impossible. What's essential is that we use loose coupling when bridging the gap between layers of our application. Learn how to differentiate between situations where you should loose coupling or tight coupling in your Vue.js applications.

How a DevTools Extension is Made

This is a guide through the main parts of the official Vue DevTools extension to learn from it and understand a successful approach for building these kinds of tools.

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.

How to test your library for Vue 2.x and Vue 3.0

Now might be a good moment to think about updating your unit tests setup (based on Jest) so that it could run against both Vue 3.0 and Vue 2.x. This article explains how to do that.

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.

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.

Make Libraries Work with Vue 2 and 3

Probably my favorite news this week! Anthony Fu created Vue-Demi. A utility library that allows you to ship 1 version of your Vue library that will support both Vue 2.x and Vue 3.0 at the same time. All you have to do is change your composition-api imports from either “vue” or “@vue/composition-api“ to “vue-demi”. The library will automatically use the available source for those functions based on the environment. Can’t wait to try it out with the new Vuelidate version.

Separating Core Logic and Framework Integrations

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

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.

Understanding Reactivity in Vue 3.0

The Vue.js core team member Jinjiang has written an amazing, in-depth article about the reactivity system that can be found in Vue 3.0. It talks about how the reactivity API has evolved from what we had in Vue 2.x and it even shows how you can use the Vue’s new standalone reactivity with React.

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.

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.

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.

The case for HOC vs The Composition API

In this article Abdelrahman compares Higher-Order Components (using scoped-slots) with the upcoming Composition API. I especially enjoyed the Vee-Validate v4 comparison. Check it out!

What to do when Vue hydration fails

SSR is amazing but also comes with errors you might have not seen before. Especially one problem still boggles lots of minds: When Vue Hydration fails. In this article we will take a look at possible reasons, explain what the error means and how to fix it.

#33: Use Web Workers in your Vue.js Components for Max Performance

Learn how to get up to 20x performance improvement of Vue.js components that rely on heavy tasks so they render and load faster.

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.

Understanding Vue's Deep CSS Selector

Learn how to use the Deep selector in Vue, a powerful tool for resolving certain CSS issues.

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.

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.

GitHub - ffxsam/vue-typescript-cookbook

Recipes to demystify Vue + TypeScript

Howto Add TypeScript to Your Existing Vue Project

Here’s an interesting take on using TypeScript in a Vue project. Usually when people are talking about TS, they focus on creating a brand new application stack with TypeScript. In this article, Ville Säävuori focuses on how to add TypeScript gradually to an existing application. It also mentions several other resources where you can learn more.

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

Take a look at what I consider to be best practices when writing tests for Vue components. We will also take a sneak-peak at the new version of Vue Test Utils, built in TypeScript for Vue 3.0, and some of the new features.

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.

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.

Mastering Volatile Docs Through Automation

We all know that for the success of software, documentation is extremely important. What you might not know yet, though, is how to keep always docs up to date through the constant changes of your project. If you're interested, Eduard from Storefront UI shares some valuable pieces of experience on the topic – be sure to have a read!

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.

Reactivity: Vue 2 vs. Vue 3

If you've been following the news, you should know by now that reactivity in Vue 3 will be (or has been) written with Proxy instead of Object.defineProperty. In this article, Marina walks us through both of these techniques and explains why proxies are the better deal.

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.

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!

Leverage `provide/inject` to avoid prop drilling in Vue.js

A quick tutorial on how to build support for dynamic theming using the provide/inject API. Although this API is generally not recommended for common usage in applications in Vue 2.x, this might change in Vue 3.0 given the incoming tweaks it receives. Definitely something worth picking up right now.

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!

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.

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.

How to reuse one Vue.js codebase across multiple apps

Thomas Holland returns with another article on Vue.js app architecture. I loved his previous article on Domain-driven development and this week he speaks about code re-usability but not in just one app, but multiple of those.

vue-loader: 📦 webpack loader for Vue.js components – explained

Vue-loader is the webpack loader responsible for transforming our favorite .vue single-file components into something that is understandable by the browser. If you have been wondering how it works underneath, this explanation might give you a better idea.

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!

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.

#29 Use old instance properties in Composition API in Vue.js 3

Learn how to use this.$emit, this.$attrs and more in the new Composition API, where you have no this (component instance) in your Vue.js Components.

A domain-driven Vue.js Architecture

A very interesting article on a topic that is rarely touched – application architecture. More specifically the DDD (Domain Driven Development) approach. The author starts with folder structure and then going through how different layers of abstractions are combined to form features.

Vue 3 Reactivity Reimagined - Live Coding @ Vue.js London Meetup

Watch Jason Yu as he builds the Vue 3.0 reactivity from scratch, first starting with the getters/setters approach (used in Vue 2.x) and then moving to Proxies. Amazing video!

Suspense - new feature in Vue 3

In this article, we take a deep dive into the new Suspense feature that will be shipped with Vue.js 3. Suspense is a special component that renders a fallback content instead of your component until a condition is met.

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.

HYS #1 - Quasar 1.3.0

Scott goes through some of the recent features of Quasar. If you’re using the framework or are just curious about it – read the article. It’s amazing how the framework grew from when I first heard about it a few years ago.

An Early Look at the Vue 3 Composition API in the Wild

Here’s another great article on the Composition API that goes beyond basic examples and instead refactors a rather big component coming from a real project. It really highlights one of the biggest benefits of the new API – a clean way to separate different functionalities of a component and allowing for sharing those with other components.

Vue 3: Start Using it Today

If you've not been living under the rock, you must have heard of the next major version of Vue. Sure, Evan and the core team have been putting lots of effort into the vue-next repository which is planned to be released the soonest, but what if you just can't wait to try out (some of) the new features? In this article, Gregg from VueMastery will guide you through just that – how to start using Vue 3 today and be fully prepared for what tomorrow has in store!

How to make provide/inject reactive

Although you probably shouldn’t abuse provide/inject in your applications, sometimes it’s the perfect tool to solve a specific problem. However, what you might notice is that usually injected properties don’t really stay reactive. And that’s how it works by design. But there is a trick you can use to make those properties reactive. Or you can use Thorsten’s vue-reactive-provide plugin.

Vue Camera Gestures - Add AI powered gesture controls to your app in 1 line of HTML

What if you could pop a unicorn in your app whenever the user had a super bored face? Or play a loud irritating sound when they close their eyes? Well, you probably shouldn’t, but this article might help you if you still wanna do it. Though it starts with something simpler – hand gestures. Great read! Powered by Tensorflow!

Thought on Vue 3 Composition API - `reactive()` considered harmful

The new Composition API introduces two ways to declare reactive data, either using reactive or ref. Both of those have their own quirks and in this article Jason Yu goes through how both of those work and why he thinks ref is a better way to work with reactive data.

Dynamic Vue.js CRUD Applications

The term CRUD stands for "create, read, update and delete" and is usually used to describe actions you can perform on a persistence layer like Vuex. This often ends up with a lot of repetitive code where the only variable is the resource it manages. In this article, Markus shows how you can use dynamic Vuex modules and a JSON schema to generate a fully functioning CRUD.

Forcing Re-computation of Vue's computed properties

Computed properties are one of my favorite features of Vue, although the way they work internally might not be clear on the first sight. In this article, Abdelrahman is exploring several ways of how you can force Vue to recompute a specific computed property on demand. On a side note – you probably shouldn’t be doing this unless you really need it.

Nuxt + TypeScript + Apollo: a bumpy road

Nuxt with TypeScript and Apollo – sounds like an amazing stack to work with. But is it really? Read this article and find out! Such a bait description, I know!

Decouple Vue.js components from the Vuex Store

Markus is back with another advanced article. This time about decoupling your components from the Vuex store by introducing an additional layer of abstraction – providers. Before you jump on the idea though, make sure to read the wrap up at the end of the article.

Big Giant Vue Apps

Architecting a very large application isn’t an easy task, especially if it consists of apps dedicated for multiple platforms – in one repo. If you’d like to learn how Jacob has solved this problem, check out this article.

LinusBorg/composition-api-demos: A Vue.js app demonstarting various use cases for the new composition API

Thorsten has prepared a set of examples demonstrating several use cases for the upcoming composition-API. Make sure to take a look to see how different problems can be solved using the new API.

Dependency Injection in Vue.js with Functional Component Factories

Dependency Injection, or DI in short, is a common design pattern that decouples the usage of an object from its creation, which (among other benefits) helps reduce boilerplate code and make unit testing easier. While not exactly the most basic technique, DI is certainly something you'd want to get a hold of to become a better developer. In this article, Markus introduces us to one interesting method to use DI in Vue – are you ready to dive in?