192Monday, April 12, 2021Vue 3.0 to drop IE 11 support (RFC); 2 days until Vueconf.us; Component testing in Cypress;
Hi there!
Last month might not have been the most eventful when it comes to Vue news, but there’s been plenty of exciting new libraries for Vue 3.0. Those include:
- 🍍Pinia – a new Vuex alternative created by Eduardo San Martin Morote
- ✋Vue-UseGesture – a composable that helps you handle all kinds of mouse and touch events, including complex gestures by Mesut Koca
- 🪄useMagicKeys – a composable that allows you to easily set keyboard shortcuts by Anthony Fu and the VueUse team
- 📐Splitpanes – a library that makes dynamic splitpanes a breeze by Antoni "antoniandre"
There’s also been one pretty impactful news – Vue 3.0 will likely drop support for IE 11. As dramatic as it sounds, Vue 3.0 was not supporting IE 11 at any time, but there was the plan to create a 3.0-compat build, that would support IE 11. Instead, the new idea (still in RFC) is to backport as many Vue 3.0 features (like the Composition-API) back into Vue 2.x. This should both ensure a smoother migration from Vue 2.x to 3.x, while also reducing the maintenance burden of supporting 2 builds of Vue 3.0. Additionally, this also removes the need to support IE 11 by all the 3rd party libraries.
It also means that the Composition-API plugin for Vue 2.x will be obsolete, which is a good thing, because once the API becomes part of the core, the plugin-performance-tax will be removed. As an added benefit, Vue 2.x is being migrated to TypeScript as we speak, which should improve the overall developer experience of those using TS.
Lastly, VueConf.us is happening in on April 14th. It’s a completely free event and from what I’ve heard, there are some exciting announcements to look for! Don’t miss it – the tickets are available only until April 13th. ⏰
Stay safe and enjoy the rest of the newsletter,
P.S. Bento is now 6 months old! It’s incredible how fast he has grown! Just yesterday, he was this tiny boy and now he looks so serious! Especially when he’s suspicious about his half-birthday cake! 🎂
Stories
Proposal for dropping IE 11 support in Vue 3 · Discussion #296 · vuejs/rfcs · GitHub
Though Vue 3.0 is not currently supporting IE 11, there was the idea to ship a compat built that would support it. However, after the recent developments, the team figured that it might be better to instead port as many Vue 3.0 features into Vue 2.x core (including the composition-API) instead. Additionally, the Vue 2.x codebase is being rewritten in TypeScript.
Vue Storefront Summit 2021 – April 20-21, 2021
If you’re working with e-commerce you might be interested in the upcoming conference around Vue Storefront. Besides Vue Storefront itself, the conference talks will also mention integrating with headless e-commerce and CMS tools. The last one, might be useful even if you’re not in the c-commerce business.
Vue - The Road To Enterprise
Buy now and get 30% OFF + bonus videos covering:
- Composition API
- Compound Components Pattern
- How to Write Cleaner Code Using Modern JavaScript Features
Master advanced patterns and best practices for Vue apps and become production-ready with "Vue - The Road To Enterprise", the most advanced Vue book written.
Introducing Component Testing with Cypress
Component Testing in Cypress is a new feature coming up in Cypress 7.0 and is potentially a game-changer for writing component tests (both small units and larger interface tests). In this video, Lachlan shows how you can use it with Vue.
How to easily sync with multiple v-models in Vue 3 using Composition API
Vue 3 has brought many new features, and the ability to use more than one v-model directive on the same element is one of them. I want to share with you a quick tip on how to handle updating the state of a parent component when using multiple v-models. It's especially useful when dealing with forms.
The Quasar Show - Episode 1
Luke Diebold has started a new series of videos called "The Quasar Show"! In this episode they cover recent Quasar news, usage with the Composition-API, showcase of live projects and more advanced tips & tricks that you might not have known about.
Comparing the New Generation of Build Tools
A bunch of new developer tools have landed in the past year and they are biting at the heels of the tools that have dominated front-end development over
Develop with Vite - Talk Transcript + Slides
A great talk by Anthony, that first explains how Vite works and then showcases a combination of Vite plugins that together make up for an awesome developer experience.
Rewriting Nuxt Hacker News with Fastify, Vite and Vue 3
Learn how to make a fast, maintainable Vue 3 app with Fastify and Vite.
Developing A Vue 3 Headless Component
What are headless components? And how can they be developed using Vue 3?
API Factories for Vue.js & Nuxt
How are you organizing your API calls? Have you considered API factories to make your codebase easier to work with, increasing your team’s productivity?
Libraries
Pinia
The Vue Store that you will enjoy using
Vue UseGesture
Vue UseGesture is a library that focuses on making complex gestures such as drag and pinch easy to configure.
useMagicKeys by VueUse
Another VueUse composable that allows for easy setting up of keyboard shortcuts.
Splitpanes
A Vue JS reliable, simple and touch-ready panes splitter / resizer.
GitHub - rubnvp/vue-props-validation
Vue props validation logic extracted in a small package for nested validations in object and arrays passed as props.
GitHub - frandiox/vitedge
Use Vite to render and cache your pages at the edge with Cloudflare Workers
GitHub - frandiox/vite-ssr
Use Vite for server side rendering in Node
Vite - Visual Studio Marketplace
Extension for Visual Studio Code that integrates Vite and a browser preview right into VS Code.