Articles

57 articles

The new Provide and Inject in Vue 3

Getting stuck into the prop drilling? Learn how provide/inject can make your components more flexible and independent in this short tutorial.

Anthony Konstantinidis

Anthony Konstantinidis

Jul 18, 2022

The 101 guide to Script Setup in Vue 3

Don't you know about Script Setup yet? Check out this short article now and learn the nicest way to define a Vue component right now!

Anthony Konstantinidis

Anthony Konstantinidis

Jun 20, 2022

Hybrid Rendering: the secret way to smoothly test Vue.js components

Find out how to combine Deep and Shallow Rendering in order to achieve a flexible solution to test your Vue.js combining the best of both worlds.

Alex Jover Morales

Alex Jover Morales

Mar 7, 2022

How to use script setup in Nuxt 2

If you love Vue script setup and want to use it in your current Nuxt 2 project, the Nuxt team has made it possible to start using it today!

Paul Melero

Paul Melero

Feb 14, 2022

When to use a Vue Render Function

When should I use a render function in Vue.js? We’re going to cover some advanced Vue.js patterns when you need to use render functions.

Paul Melero

Paul Melero

Jan 27, 2022

Nuxt 3 + Storyblok for a Sushi Recipes Website

Have you used Nuxt 3 with Storyblok? Learn how to build a real-world recipes website from scratch (includes a video so you can see all the process)

Alvaro Saburido Rodriguez

Alvaro Saburido Rodriguez

Dec 15, 2021

Testing Vue.js Components with Jest

Testing Vue.js Components with Jest

A concise guide to testing Vue.js components using Jest and the official library vue-test-utils

Going 3D with Trois.js and Vue 3

Learn about Trois.js, a JS library to render 3D scenes in Vue. In this article, we're learning the basics of using Trois.js in a Vite + Vue 3 app

Alvaro Saburido Rodriguez

Alvaro Saburido Rodriguez

Nov 16, 2021

Introduction to Render Functions

What is a render function? Let's see a simple example and the comparison with Vue compiled code and its counterpart template compiled code.

Paul Melero

Paul Melero

Sep 28, 2021

Achieve Max Performance loading your images with v-lazy-image

Don't you know what to do to improve your web performance? Learn Progressive Image Loading, a technique used by Spotify, Medium and Netflix.

Alex Jover Morales

Alex Jover Morales

Aug 30, 2021

Use Responsive Images with v-lazy-image

Is Web Performance a priority for you? Then read this article! You'll learn how to lazy load images with srcset and picture tag using v-lazy-image.

Alex Jover Morales

Alex Jover Morales

Aug 23, 2021

How to test Web Workers with Jest

Do you know the best part of Web Workers? They can speed up heavy tasks on your UI. But, have you tried testing them? Is not that easy... until now.

Andrea Stagi

Andrea Stagi

Oct 20, 2020

How to use the new Fetch in Nuxt.js

The Nuxt team is on fire, releasing new stuff every week! In this tip Samuel shows you a feature that might've gone unnoticed... till now.

Samuel Snopko

Samuel Snopko

Sep 7, 2020

Generate and deploy the blog as a full static Nuxt site

Your site is ready for the world. Wait, where and how do I publish it? You only need 5 minutes to learn how to deploy a Nuxt.js site in Netlify.

Alex Jover Morales

Alex Jover Morales

Aug 25, 2020

Optimize SEO and Social Media Sharing in a Nuxt blog

Do you want your blog to reach an audience? Then you should have SEO in your mind. Learn two techniques you can easily apply to your Nuxt blog.

Alex Jover Morales

Alex Jover Morales

Aug 18, 2020

Advanced i18n in Nuxt using Interpolations

Internationalization it's necessary in a multi-language site. Learn how to do i18n the right way in Nuxt and Vue using the nuxt-i18n module.

Debbie O'Brien

Debbie O'Brien

Aug 17, 2020

Tags and Search Functionality in Nuxt Using Storyblok API

Don't confuse your users! Learn how to provide them with great navigation using categories, tags and search so they can find your content easily.

Alex Jover Morales

Alex Jover Morales

Aug 11, 2020

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.

Alex Jover Morales

Alex Jover Morales

Jul 21, 2020

Setting up a full static Nuxt site

Overwhelmed by too many options to create a blog? Chill and use Nuxt, Storyblok and TailwindCSS to make it simple, beautiful and incredibly performant

Alex Jover Morales

Alex Jover Morales

Jul 14, 2020

Use Composition API to easily handle API requests in Vue.js

Not sure how to organize your API client in Vue.js? Learn this simple technique on how to do it using the new Composition API and make it easy.

Carlos Rodrigues

Carlos Rodrigues

Jul 6, 2020

Build a Game in Vuejs with Phaser

Love video games and Vue.js? Then check this tutorial and learn how to build a game using Phaser, the javascript game engine for the web.

Quique Fdez Guerra

Quique Fdez Guerra

Jun 22, 2020

Create Dynamic Titles and Favicons with Nuxt

Thinking on showing a timer on the browser tab? Or different favicons depending on a state? Learn to use vue-meta in your Vue.js apps in this tutorial

Javier Martínez

Javier Martínez

Jun 18, 2020

Auto Load Vuejs Components in Nuxt

Tired of writing imports all over your code? Read this tutorial to learn how to use Nuxt components module to automatically import your components

Debbie O'Brien

Debbie O'Brien

Jun 17, 2020

How to structure a Vue.js app using Atomic Design and TailwindCSS

Unsure about how to organize your Vue.js components? Learn in this tutorial how to do it using Atomic Design methodology. Examples and demos included!

Alba Silvente

Alba Silvente

Jun 16, 2020

Go async in Vue 3 with Suspense

Learn Suspense, one of the most exciting Vue 3 features used to make async request easy and interactive. Don't miss this tutorial with code snippets!

Vinicius Kiatkoski

Vinicius Kiatkoski

Jun 15, 2020

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

Alex Jover Morales

Alex Jover Morales

Mar 31, 2020

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.

Alex Jover Morales

Alex Jover Morales

Mar 3, 2020

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.

Alex Jover Morales

Alex Jover Morales

Feb 17, 2020

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.

Alex Jover Morales

Alex Jover Morales

Dec 9, 2019

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 instance in your Vue.js Components.

Alex Jover Morales

Alex Jover Morales

Nov 26, 2019

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.

Alex Jover Morales

Alex Jover Morales

Nov 19, 2019

Theming using CSS Custom Properties in Vue.js Components

Learn in this article how to theme your applications and components by leveraging the power of CSS Custom Properties in your Vue.js components

César Alberca

César Alberca

Nov 5, 2019

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

Build a Pie Chart component using one of the modern CSS features Conic Gradient

Alex Jover Morales

Alex Jover Morales

Oct 21, 2019

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

Build a Carousel by using one of the latest CSS features called scroll-snap and bundle it into a Vue.js component

Alex Jover Morales

Alex Jover Morales

Oct 6, 2019

Data Provider component in Vue.js

Use scoped slots to create a data provider in Vue.js

Alex Jover Morales

Alex Jover Morales

Sep 24, 2019

Using Scoped Slots in Vue.js

Quick example on how to use scoped slots for component reusability in vuejs

Alex Jover Morales

Alex Jover Morales

Sep 15, 2019

Quick Content Testing using Snapshots in Vue.js

Useful tip about how to use snapshot testing in Vue.js the right way and have consistent and coherent tests in your applications

Eduardo San Martín

Eduardo San Martín

May 28, 2019

Style inner elements in scoped CSS using /deep/ selector in Vue.js

Learn how you can use /deep/ to deeply style your Vue.js components using scoped CSS.

Alex Jover Morales

Alex Jover Morales

May 12, 2019

The importance of scoped CSS in Vue.js

Vue.js tutorial on how to us scoped CSS to avoid style collision in your Vue.js and Nuxt.js applications.

Alex Jover Morales

Alex Jover Morales

May 7, 2019

How to create a Geolocated Currency with MaxMind in Vue.js

Learn in this tutorial how to use content that depends on the language and location of the user and apply true i18n in Vue.js

Samuel Snopko

Samuel Snopko

Apr 22, 2019

Debugging Templates in Vue.js Components

Guide to debug component templates using the browser dev tools.

Rubén Valseca

Rubén Valseca

Apr 18, 2019

Simple transition effect between pages and layouts in Nuxt.js

In Nuxt.js, the Vue.js framework, it's very easy to apply transitions between pages and layouts on route changes. This tutorial explains how to.

Samuel Snopko

Samuel Snopko

Apr 17, 2019

Lazy load images using v-lazy-image Vue.js component

Learn to improve the web performance of your vue.js application

Alex Jover Morales

Alex Jover Morales

Apr 16, 2019

Dynamic Imports in Vue.js for better performance

Tutorial on code splitting using dynamic import in vue.js applications in order to have better performance.

Paul Melero

Paul Melero

Apr 15, 2019

Testing logic inside a Vue.js watcher

Tutorial on how to test the logic of a vue.js component watcher instead of testing the framework

Javier Martínez

Javier Martínez

Apr 14, 2019

Handle and redirect 404 responses in Nuxt.js

Learn how to redirect a user to the home page in case it navigates to a page that doesn't exists

Alex Jover Morales

Alex Jover Morales

Apr 7, 2019

Run watchers when a Vue.js component is created

Tutorial on how to make a watcher run instantly when a Vue.js component is created

Alex Jover Morales

Alex Jover Morales

Mar 31, 2019

Simple and performant functional Vue.js components

Functional Vue.js components

Alex Jover Morales

Alex Jover Morales

Mar 24, 2019

Listen to lifecycle hooks on third-party Vue.js components

A quick tip on how to avoid repeating a double emit call and listen to lifecycle hooks externally

Alex Jover Morales

Alex Jover Morales

Mar 17, 2019

The power of Snapshot Testing in Vue.js

Learn why using Jest's snapshots testing for you Vue.js components can make testing much easier and quicker

Alex Jover Morales

Alex Jover Morales

Mar 10, 2019

Two less known facts about Vuex

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

Nicolò Maria Mezzopera

Nicolò Maria Mezzopera

Mar 3, 2019

Create an ImageSelect component on top of vue-multiselect

Build an ImageSelect Vue.js component using the popular vue-multiselect package following the Adaptive Components pattern.

Alex Jover Morales

Alex Jover Morales

Feb 24, 2019

Creating a Store without Vuex in Vue.js 2.6

Tip on creating a simple store in Vue.js 2.6 by using the new Observable API

Alex Jover Morales

Alex Jover Morales

Feb 17, 2019

Adaptive components using v-bind and v-on

Learn to use v-bind and v-on in order to proxify props and events for building a wrapper component in Vue.js.

Alex Jover Morales

Alex Jover Morales

Feb 10, 2019

How to use the new v-slot directive in Vue.js

Simplify the use of scoped slots with the new v-slot syntax introduced in Vue.js 2.6.0 beta 3

Alex Jover Morales

Alex Jover Morales

Feb 3, 2019

Remove unused CSS with PurgeCSS

Use PurgeCSS to remove dead CSS that is not used, reduce the size of the generated CSS and improve performance of a Vue.js application

Alex Jover Morales

Alex Jover Morales

Jan 27, 2019

Measure runtime performance in Vue.js apps

Short tutorial on how to measure web performance in Vue.js applications

Alex Jover Morales

Alex Jover Morales

Jan 20, 2019

Improve performance on large lists in Vue.js

Learn how to use Object freeze to improve performance on list rendering in Vue.js by creating a non-reactive array.

Alex Jover Morales

Alex Jover Morales

Jan 13, 2019

Don't miss out anything about Vue, your favourite framework.

Subscribe to receive all the articles we publish in a concise format, perfect for busy devs.

Sponsors

VueDose is proudly supported by its sponsors. If you enjoy it, consider supporting it to ensure the project maintainability.

Silver
Learning Partner