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.
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.
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.
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.
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.
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.
<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?
- 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 - reactive
v3reactive-setup- Vue Composition API - reactive with setup boilerplate
v3computed- Vue Composition API - computed
v3watch- Vue Composition API - watcher single source
v3watch-array- Vue Composition API - watch as array
v3watcheffect- Vue Composition API - watchEffect v3ref Vue Ref