Archive search

Find the stories you need

tips

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.

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().

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.

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.

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.

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.

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.

Mastering Browser Cache

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

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?

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.

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.

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.

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.

Vue-Test-Utils Guide: Things You Might Not Know About Vue-Test-Utils

A large collection of useful tips on how to take advantage of less known Vue Test Utils features.

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.

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.

Understanding Vue's Deep CSS Selector

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

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.

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.

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.

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!

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

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.

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

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.

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.

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.

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!

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!

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.

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

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

#24 – Data Provider component in Vue.js

Not all Vue components have to be UI–rendering components. Data Provider components (like Vue-Promised) are an example of that. Read this short tutorial to learn how they are created and why they can be very useful.

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.

Lazy Loading Individual Vue Components and Prefetching

The last part of the "Vue.js Performance" by Filip Rakowski, This one is about using lazy loading for individual components, how it affects the user experience and how to improve it with smart prefetching. There are some pretty neat tricks in there so make sure to read it!

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.

How to avoid SOLID principles violations in Vue. JS application

Have you heard about SOLID? SOLID is acronym created by Michael Feathers and promoted by American software engineer Robert C. “Uncle Bob” Martin in his book “Design Principles and Design Patterns”. In this article, Manu Ustenko goes through the 5 principles and explains how those apply to Vue components.

Vue.js Router Performance

At this point lazy-loading routes in Vue-Router should probably be a pretty common practice. Hence, it’s how Nuxt.js works by default. However, there’s more that can be done to further optimize the performance of your Vue apps. In this article, Filip Rakowski is talking about a webpack trick that can improve how your vendor code is being handled by using the splitChunksPlugin.

Vue.js Single File Component Factory

Truth be told, I have some mixed feelings about this approach. As much as I appreciate the idea, similar to the author – I’m not sure if this is something I would want to see in a production app. However, this is actually something that can be easily used for building mixin factories which I believe is pretty useful. Also, with the introduction of the function-api in Vue 3.0, injecting dependencies should become much easier.

Front-end Testing and a tale of three users

Here’s a great article about testing your code. However, instead of focusing on how to write the tests it focuses on the broader picture – how to approach testing and what to test. I think that’s a very valuable perspective, good read!

Getting More Out of Vue Async Components

This one is definitely advanced, but is also one of the neatest tricks I’ve seen in a while! See how you can combine asynchronously loaded Vue components with data fetching and use it to affect the component declaration (like its data property) based on that data fetched.

Resource-Adaptive Vue Apps

So your app is responsive, but is it resource-adaptive? What does it even mean? In short words – adjusting the behavior of your application based on the condition of the clients device. For example, if their battery is low, we might avoid auto-playing videos. If their connection is slow, maybe we could load images with a slightly lower resolution? Read this article to learn how you can access those information from the browser.

Understanding Nuxt & Vue hooks and lifecycle

Here’s the 3rd and last part of a series of articles that should help you get a deeper understanding of how Nuxt works underneath. The last part also comes with a handy cheat-sheet of which hooks are called in which context (client/server/both).

Advanced Vue: Controlling Parent Slots (Case Study)

Here’s a great article by Michael Thiessen that explains one of my favorite tricks when it comes to composing components – inversion of control. Great read, though it might feel a bit advanced. But once you get this, lots of new patterns will come to your mind. Highly recommended!

Building Vue.js UI Components With HTML Semantics in Mind

When building UI components it’s important to keep in mind that the HTML elements that we’re using have a semantic meaning, which goes beyond just their default behavior – it’s also important from the accessibility perspective. In this article, Markus explains how to build components where you can control which HTML elements they will render to.

Lazy loading and code splitting in Vue.js

Filip Rakowski – a good friend of mine and the co-founder of Vue Storefront is sharing several tips that they are using within Vue-Storefront to improve the overall application performance by making use of lazy loading of components and code splitting.

3 Anti-Patterns to avoid in Vue.js

Here’s a list of 3 things you probably shouldn’t be doing when using Vue. Those include: side-effects in computed properties, mutating of nested properties of props and accessing parent component instances directly in your child components.

Working With Functional Vue.js Components

Functional components come with some performance benefits, mostly due to not having to create a new Vue component instance. However, their API is slightly different compared to regular components. For example, the way Vue forwards the listeners and static/dynamic classes differs greatly. This article covers some of the differences, so make sure to read it.

10 Things You Should Know Before Writing Your Next Vuejs Component

And lastly, a collection of tips around writing and managing Vue components. Take a quick look and see if there’s something you didn’t know.

Vue.js functional components: what, why, and when?

Ever heard of functional components in Vue? They are not all that popular, since almost everything a functional component can do, can be done with a regular one. Though, functional components do provide some extra performance in some cases and work great for building reusable compositions. Take a look at this article to learn more about them.

In Vue, When Do I Actually Need the :key Attribute and Why?

There are some tricks around using the :key attribute in Vue that go beyond just using it for v-for loops. If you’d like to learn more on that – check out the new article by Marina Mosti.

From JSX to Vue: my favorite templating tips

If you’re still new to Vue and maybe coming from a React background you might find several useful template-related tips in here. Even if you use Vue on a daily basis it might be a good idea to take a quick look at the article just to make sure you know all the tricks!

Use Fragments to Avoid Obsolete GraphQL Fields in Vue.js Applications

Another great article by Markus Oberlehner! If you ever struggled with not being sure which parts of the GraphQL query your child components are actually using you might want to read this one. Markus proposes the use of GraphQL Fragments exported by the child components themselves so that you can use them to construct one, unified query in the parent component, thus making sure you satisfy all the data requirements of your child components.

Triggering events from Vue Router views

Last week, we mentioned a tweet by Dan Vega that highlighted the fact that you can listen to events emitted by route-level components. If you’d like to read some more explanation on why this is possible (and what more) check out this follow-up article!

NuxtJS: From Terminal to Browser

If you missed last weeks Nuxt.js release, here’s a short article that highlights one of the most important changes – being able to use the browser console to see all the console.logs that would normally only show up in the terminal (when doing SSR). Already tried that feature and love it! Makes debugging SSR code so much easier.

Quick Content Testing using Snapshots in Vue.js

Snapshot testing can be tough due to its often tight coupling with content and code. Content changes fail tests even though no code has changed. This useful tip from Eduardo San Martin Morote shows us how to use snapshot testing in Vue.js the right way and have consistent and coherent tests in your applications

So What Actually is Vue.set?

After working with Vue for a bit, you will probably run into a situation where a data property you thought would be reactive is not. In this post, Marina Mosti goes over the Vue.set technique and why it's critical to grasp in order to fully harness reactivity in Vue.js.

7 Nuxt Tips Revisited

A year ago Jonas Galvez has written a series of 7 tips when working with Nuxt apps. Now as the framework as evolved, he’s revisiting those tips. Check them out. I’m personally interested in switching from the axios module to the new http module that uses native fetch.

Vue.js And SEO: How To Optimize Reactive Websites For Search Engines And Bots

If you’re concerned about having your webapp appear somewhere in the top 5 Google search results (and you probably should if you build a public facing app), you might want to take a look on this article. It covers some of the strategies to improve your SEO and some less popular traps that might accidentally hit your search position.

Debug VueJs Jest tests in vscode

Did you know that you can literally debug your tests inside your VS Code? I always forget about that, but I imagine this might be extremely useful, just throwing a debugger somewhere in a test and see what is happening right in your editor. Try it out!

Tips on Unit Testing Vue Components with Jest

Now that you are into TDD, let’s focus on how to actually test different aspects of our components. Here, Achhunna Mali shares some very useful tips on the topic. Check it out!

Making the Move from jQuery to Vue

If you’re using jQuery and thinking about migrating to Vue.js, check out this article on the migration process of taking one to the other.

Vuex showdown: Mutations vs. actions

Michael Gallagher breaks down the distinctions between mutations and actions in a detailed article.

Sharing reusable Vue.js components with Lerna, Storybook, and npm

Learn how to create reusable components that can be shared across multiple projects with Lerna, Storybook, and npm.

The IoC Container Pattern with Vue.js

Provide/inject is a powerful Vue API that is usually recommended only to library authors. However, it can also be used inside your app if done properly. It allows you to provide some context for your child components by exposing some methods or data for those child components to use. This can be very useful for cases where you don’t want to pollute the props with information that would have to be passed down the component tree several times.

Apollo state management in Vue application

I’ve recently seen a presentation on how to replace Vuex with Vue-Apollo and this article by Natalia Tepluhina goes into details on how to work with Apollo local cache and generally state management. Definitely something to read if you decide to use GraphQL with Apollo in your project.

Vue.js: Using Vue Router Page Transitions

Vue transition component is a pretty useful tool to animate elements on your page. But you can also use them on your router views. But if you don’t really have the time to figure out how to make the best out of it, Orlandster has created the vue-page-transitions library which includes several predefined page transitions ready to be used.

Handling Errors in Vue.js

By default all errors in your Vue.js code are being thrown as they are with some predefined messages that should help you debug your application. But did you know that you can additionally control the error handling within specific components? Read this to learn more on the topic.

Vue + Tailwind + PurgeCSS — The right way

TailwindCSS is probably my favorite CSS tool right now, like literally, I can’t imagine working with anything else. However, if left unchecked (not modifying the config file) it might result in a pretty large CSS bundle. Here’s a nice article that shows how to cut the size of your CSS files with PurgeCSS. But you should also take a look at the official docs regarding the file size.

Whoops! We couldn't access this Tweet.

Custom Build Modes with Vue CLI 3

Although Vue CLI takes care of a lot of the configuration for you, sometimes you want to be able to fine-tune the configuration of your application. This article covers methods on how to setup custom build modes.

Testing with Jest and Vue.js: Pocket guide

When writing tests for your Vue app, there are common scenarios that you will want to cover. This article provides some guidance on how use Jest to mock functions and how to approach testing different parts of a Vue component.

Nuxt: The Hard Parts

A common issue people have when working with Nuxt.js is integrating the @nuxtjs/auth module. In this article, you'll learn about core concepts of Nuxt.js that are critical to being successful when working with the auth module.

Yes, this is how to cache pages by URL with Vue, Vue Router and Keep Alive component

There is a less known functionality in Vue, that allows you to cache the component when it is being rendered and removed from the DOM. This is made possible thanks to the keep-alive abstract component. Instead of destroying the component instance it makes them simply inactive. This can be also used with dynamic components as well as with the router-view to cache specific routes. Check out this article to learn how to do that for custom route params.

Maintaining a single source of truth while handling form data with Vuex

Here’s a pretty useful trick on how to make it easier to work with forms that use data from Vuex. Since you don’t want to mutate the form directly, you have to go through mutations. But having a mutation for every input out there in the form – probably not the way to go. Read the article to see how it can be solved. My small suggestion would be to pass the property name into the event handler rather than keeping it inside the ID attribute.

Testing logic inside a Vue.js watcher

Here’s a pretty useful trick if you end up putting logic inside your watchers. If you do that, know that you can easily test it by calling the method directly from the $options property of your component. An alternative approach would be to assign a method to the watcher as the handler instead. Then you just need to test the method.

Code Sharing with NativeScript-Vue

Jen Looper of the great Vue Vixens is back, this time with an article on how to share the same code base among three different platforms – web, iOS, and Android – with the brand-new NativeScript Vue CLI plugin. There's also a beautiful demo: a web, iOS, and Android app to build and display mandalas. Now that's what we call “Write once, run anywhere!”

Vue During Coffee Break - Using v-model with Custom Components

In this short article, Filip Rakowski from Vue Storefront explains how v-model works and how it can be applied to every Vue component, not just form input elements. We have covered the same topic in the official Vue documentation, but it's always good to have an alternative learning resource.

How to Add Charts and Graphs to a Vue.js Application

Charts and graphs are a great way to provide a visual representation of data. In this article, Jennifer shows you how easy it is to create visually appealing charts in a Vue.js application with echarts, one of the most widely-used chart libraries out there, and vue-echarts, a Vue plugin that wraps around echarts.

Accessing Vue global filters inside component methods

Here’s a short trick on how to access globally registered filters within any components methods. Might come in handy.

How to Unlock the Full Potential of Prop Types in Vue

If you declare your props as a list of strings (don’t do it), you’re missing out on a lot of functionality. In this great article, Michael Thiessen explains what you can do to improve your components by setting up rules and validations for your props. A must read.

Vue.js cheat sheet for beginners

Do you tend to look up the Vue docs every now and then when building apps just to make sure you’re using the API in the correct way? Or to remind yourself of the syntax? I do. :) Here’s a great cheat sheet that you can print and keep on your desk for quick lookup the moment you need it.

VueDose #10 – Listen to lifecycle hooks on third-party Vue.js components

A quick tip on how to listen to lifecycle hooks of child components. Especially useful when working with 3rd party libraries. Keep in mind this does use an undocumented API and might change in the future.

#9: The power of Snapshot Testing

This week's VueDose tip from Alex Jover is about snapshot testing Vue with Vue Test Utils, the official testing library, and Jest. Oh by the way, if you're hungry for more information on testing in Vue, we strongly recommend these two books: Testing Vue.js Components with Jest also from Alex, and Testing Vue.js Applications from Edd Yerburgh, Vue Test Utils's author.

Tracing or Debugging Vue.js Reactivity: The computed tree

Here’s a great article that goes in depth of how Vue’s reactivity system is working and how you can trace and debug how different properties depend on each other. This might help you understand how updating one property might affect

Sliding In And Out Of Vue.js

This article explores how to use different types of third-party libraries like Moment and jQuery alongside Vue. This can get pretty useful, especially if you’re migrating an existing app to Vue and can’t do that in one take. Being able to still use some of that jQuery code is one of the biggest advantages for those picking Vue.

Two less known facts about Vuex – VueDose

A short tutorial on how to use watch and subscribeAction methods of Vuex in order to handle side effects, integrate external code and extend your store in Vue.js applications

Creating Custom Directives in Vue.js

Custom directives in Vue is a pretty unexplored topic, mostly used by library developers. It doesn’t mean you shouldn’t be writing your own directives. And if you were not sure how to – then this article by Jennifer Bland should give you a glimpse on the possibilities offered.

26 Time Saving Tips for Vue

When writing Vue applications, we waste our time by doing things the wrong way, when we could have been doing it the right way from the start. That’s why I put together this list of 26 articles that will help you save time, by teaching you how to avoid some common time-wasters.

Renderless or Bust! Why Renderless Component Libraries will Make Web Dev Easier and More Inclusive

Renderless components are a pretty new technique in Vue, but at the same time it’s an incredibly powerful one. It allows for a smooth separation of the logic and the user interface that consumes it. Might prove extremely powerful for open-source libraries.

Creating a Store without Vuex in Vue.js 2.6

A great tip on how to create a simple store in Vue.js by using the new Observable API that became available with Vue v2.6.