VueWeekly.dev - Issue #5 - Handling Asynchrony in Vue 3 + Comparing Vue and React 👀
Handling Asynchrony in Vue 3 / Composition API — Part 1: Managing Async state
In Part 1 of a three-part series, the author steps through real-world use cases of the Composition API. The <Suspense> example immediately caught our eye.
<template> <div v-if="error"> </div> <Suspense v-else> <template #default> <Admins /> <Users /> </template> <template #fallback> <div>Loading...</div> </template> </Suspense> </template>
A couple of months ago at work, we’ve decided to go all-in on Composition API with a new version of our product. And from what I can tell — looking around at new plugins appearing, all the discussions in the discord community — the composition API gets increasingly more popular. It’s not just us.
How to Create and Publish a Vue Component Library
A brief look at the process to create and distribute a Vue library. Our tip when publishing to npm? Make sure your library name is available before getting attached to it!
I wanted a more in depth understanding of how a component library is built, and I want to show you how you can get a better understanding too.
To create this component library, we’re going to use the
vue-sfc-rollupnpm package. This package is a very useful utility when starting a component library.
Comparing Vue and React
A nice comparison across Vue and React. We came away thinking that we learned more about each approach rather than some sort of feature bake-off. We highly recommend this post as one to help gain an understanding and appreciation of the similarities and differences.
As a React developer, I wanted to dive into Vue to learn how it approached building JavaScript UI. How do they differ? Is one better?
fast.design Vue Integration
We’re starting to see a similar theme (i.e AWS Amplify) of multi-framework/language component libraries (based on web components). We’ve seen this before (SWIG anyone?) but it’s starting to pop up more often in the frontend world. We see big wins in the i18n, accessibility, and RTL (right-to-left) support that these types of libraries usually support.
FAST is a collection of technologies built on Web Components and modern Web Standards, designed to help you efficiently tackle some of the most common challenges in website and application design and development.
FAST works great with Vue. Let’s take a look at how you can set up a Vue project, starting from scratch.
Vue 3 new features summary
Yanze Dai deep-dives into the new Vue 3 features with comparisons to React and also the current Vue 2 API. We’re not as concerned with the comparisons here as we are with changes that will increase efficiency and change the way that we structure applications. He does not let us down 🚀.
I have to say that Vue 2 is already amazing enough. But with Vue 3’s new features, it’s likely to upgrade our projects to an upper level. I guess the most thrilling feature in Vue 3 would be the composition APIs. Evan You himself mentioned that the composition APIs are inspired by the React hooks. Even though the two APIs hooks and compositions are a lot alike, but from the code base they are completely different. Let’s not discuss which is better or promising because I don’t really think either framework outraces another.
In all, it’s so happy to see that Vue can also do what React does. Let’s have a close look at the new features.
Kickstand UI
Like fast.design above, Kickstand is a complete component library that focuses on User Experience and Accessibility. Kickstand also plays well with other frameworks making it a good option if you’re trying to get better consistency across teams working with other technologies.
Kickstand UI can be easily implemented in any of your projects regardless of the technologies that are already in place.
It also means that you can have a Design System that is designed to be customized to match your brand with a few simple value changes rather than extensive overriding of the default CSS.
A Font-Like SVG Icon System for Vue
<p style="font-size: 2em; color: red;"/> <svg-icon icon="exclamation-circle" /> </p>
Using SVG files instead can eliminate those pain points, but how can we ensure they’re just as easy to use while also making it easy to add or remove icons?
New Release of Vue VSCode Snippets
Sarah Drasner brings a nice update for a go-to VS Code extension that helps to amp up productivity and reduce boilerplate code. She also has a fantastic VS Code theme out there, Night Owl.
- Better TypeScript Support
- Vue 3 Composition API support
- Emit, named slots, other goodies
A peek at a few of the Vue 3 additions:
v3reactive- Vue Composition API - reactivev3reactive-setup- Vue Composition API - reactive with setup boilerplatev3computed- Vue Composition API - computedv3watch- Vue Composition API - watcher single sourcev3watch-array- Vue Composition API - watch as arrayv3watcheffect- Vue Composition API - watchEffect v3ref Vue Ref