Weekly Vue.js News - #50 - Delay Loading Appearance of Spinner

Migrated Issue

Expect missing links and broken styling, as this issue has been migrated from my previous newsletter service.

Hi 👋
Last weekend I got married 💍
In this issue, I have curated a few interesting articles and tips to help you in your journey to become a Vue expert.
Have a great week ☀️

Vue Tip: Delay Loading Appearance of Spinner

Eager delay spinners are not a good user experience as they can make a snappy user interface feel slower. We can provide a better user experience (UX) by delaying spinners to appear only after a perceivable delay.

To achieve this improved UX, you can use AsyncComponent.

Vue provides the defineAsyncComponent function to lazy load components:

defineAsyncComponent accepts a loader function that returns a Promise. The resolve callback should be called if the component has been loaded, and the reject callback to indicate that loading the component has failed.

Now let's implement the delayed loading spinner by using the advanced options of the defineAsyncComponent function:

This demo simulates a network request to fetch HelloWorld.vue from a server which takes 2 seconds:

The loading component Loading.vue is shown after a delay of 500ms, defined with delay: 500.

You can try it yourself in this StackBlitz playground.

Vue News

How to use $refs in Vue 3 with Composition API and Script Setup

Learn by example how to use $refs in Vue 3 while using the Composition API and script setup.

Building Headless Commerce with Nuxt 3, Shopify, and TailwindCSS

Jakub walks you through the creation of an e-commerce website with Nuxt 3 and Shopify in this complete tutorial.

A migration to Vue 3

👉🏻 At Studyportals, they have around 20 microservices running on Vue.js .

👉🏻 Joos shares their approach of upgrading tens of thousands lines of code across hundreds of components spread over about twenty microservices.

Code Coverage for Vue Applications

👉🏻 Gleb shows how to instrument the application's source code to collect the code coverage information.

👉🏻 He then uses the code coverage reports to guide the end-to-end test writing.

Introduction to Vite: The Next Generation Frontend Tooling

Victoria give an introduction to Vite and explains why it is a developer's favourite these days

HTML Tip: Specify wheter an element is draggable

Links and images are draggable by default.

The draggable attribute is often used in drag and drop operations.

Web Development News

Nx - The fastest growing monorepo solution in the JS ecosystem

👉🏻 Nx is a fast, lightweight and extensible build system that features built-in monorepo support.

👉🏻 It has support for Angular, React, Next, Next.js, Node, and more.

Learning HTML was too hard so I made a compiler instead

"The 10-year story of me getting into computers to make my own compiler just so that I could make a website."

Pair programming is difficult

Some advices:

👉🏻 Agree a destination before you start.

👉🏻 Agree an estimated time of arrival.

👉🏻 There must be exactly 2 people and 2 roles.

👉🏻 Both people must be able to access a keyboard at all times.

👉🏻 And more

Unit and Integration Tests

"In this post I argue that integration-vs-unit is a confused, and harmful, distinction. I provide a more useful two-dimensional mental model instead."

Building Interoperable Web Components That Even Work With React

Adam explains how to build a component library based on Web Components that can be used in different frameworks like React, Svelte, Vue, etc.

What Makes a Great Developer Experience?

👉🏻 Lee's article contains a collection of opinions on what makes a great developer experience.

👉🏻 It covers frameworks and libraries, documentation, and APIs.

The End of Localhost

👉🏻 This article discusses the benefits of working entirely in the cloud and the inevitable end of localhost.

👉🏻 The cloud is reducing dev machines to being a poorly maintained set of environment mocks.

🤔 Every Programmer Should Know

👉🏻 A collection of (mostly) technical things every software develohttps://zelig880.com/how-to-use-refs-in-vue-3-with-composition-api-and-script-setupper regardless of their skill level or tech stack should know.

👉🏻 Highly opinionated and not backed by science. Comes in no particular order.

🛠️ Schnipsel

Write snippets once, render them for many IDEs.

👉🏻 Write snippets once in Markdown;

👉🏻 Render them to many IDEs format (VS Code, Vim, Sublime, IntelliJ);

👉🏻 Flexible and typed configuration.