VueWeekly.dev - Issue #21 - History and Persistence in Vue 3 + State of Vue.js Survey 2021 🗓️
Releases
vue-router-next v4.0.1
Today Vue Router 4 is officially released as stable. After 14 alphas, 13 betas and 6 release candidates, Vue Router v4 is ready to bring the best of routing to your Vue 3 applications with improved bundle size, TypeScript integration, new features and consistency improvements for modern apps.
It has taken almost 2 years of work, around 1500 commits, 15 RFCs, and the help of many users and their bug reports and feature requests to get here. Thank you all for your very much appreciated help!
vetur 0.31.0+
🎉 RFC release 🎉 We support monorepo and multi-root workspace in this version. We have also added a new config file called
vetur.config.js.
Community
State of Vue.js Survey 2021
We're collecting responses to our survey to find out how developers feel about Vue today!
The State of JavaScript Survey
For the past four years this survey has helped us do just that, by collecting data from over 20,000 developers to identify current and upcoming trends.
This year again, take the survey to help us find out which libraries developers want to learn next, which have the best satisfaction ratings, and much more.
Articles
History And Persistence in Vue 3
Let's implement state persistence with history support in Vue 3. A good example of an app that properly handles this functionality is excalidraw.
Websockets streaming magic. Loading thousands of images in Vue.js
In this post, I will walk you through how I am able to optimally load thousands of images without any loading indicators, screens, or a break in the user experience (UX)
React Query's core in v3 is now standalone and can be used with other frameworks
https://twitter.com/wobsoriano/status/1337969743240679424
Has Vite Made Vue CLI Obsolete?
Vite's dev server is 10-100x faster than Webpack and Vue CLI. Does this mean Vue CLI is obsolete? In this article, we'll compare the two build tools and address their pros and cons.
State Management in Vue 3
With the new Vue 3 composition API, the options you have for state management are expanding a lot and some of the libraries I will mention here are pretty cool 💅, you will see... I will just show you the top 4 libraries I considered for my project when I switched to Vue 3.
Language Aware Nuxt.js Routing
export default function LangAwareRoutingPlugin(ctx) {
const redirect = ctx.redirect;
ctx.redirect = function localizedRedirect(...args) {
const locale = ctx.app.i18n.locale;
const locales = ctx.app.i18n.locales;
// figure out which part of the args is the URL as the first argument can occasionally be a status code
const pathIdx = typeof args[0] === 'number' ? 1 : 0;
// localize the path in-place
args[pathIdx] = prependLocaleToPath(locale, args[pathIdx], locales);
return redirect(...args);
};
// ...
}
For as long as I can remember, building multi-language websites is the norm in Egypt and catering for multi-language audience is an expectation rather than a "nice-to-have".
So even if you are starting on a project with a single language it will almost be required at some point to add multi-language support to it.
Getting Started with Vue 3 and PrimeVue
Migrating Vue 2 to Vue 3
I recently converted a second app from Vue 2 to Vue 3, added TypeScript, and swapped from options api to composition api. Here are my notes from the experience...The steps I followed may not be the most optimal path. I would be shocked if they were. Your mileage may vary (YMMV). After digging through the docs and the Vue CLI API (to check out the add/migration commands) this is where I landed. Hopefully by sharing the steps I went through they will be helpful to some of y'all.
nuxt-contrib/ohmyfetch
A better fetch API. Works on node, browser and workers.
Made with Vue
https://twitter.com/damienmortini/status/1337023971464720384