180Monday, May 11, 2020🏎 Say hi to Vite! A brand new, extremely fast development setup for Vue. So fast it feels instant!
Hey there,
As you all know "Vue" in French stands for "View" and pretty much describes what Vue.js doing – handling the view part. This week, I’d like to introduce you to "Vite", which means "Fast". It’s a brand new development setup created by Evan You (tweets for context). It ditches bundling in the development phase in favor of using native ES imports with on demand compilation of Vue single-file component files and more. Also acts as a local server and is capable of bundling production code using Rollup.
What does it mean? The fact that it is crazy fast. Cold start clocks at around 140ms compared to Vue-CLI 1900ms. But now the best part – changes in code are reflected in the browser almost instantly, without a page reload. HMR that is actually reliable! 🎉
Hold your horses though... Vite is currently still in the experimental phase. You can learn more about the project on GitHub and follow Evan on Twitter for more updates like this one.
Ah, and there is already VitePress! Obviously it’s still a work-in-progress but you can play with it. Just like Vite, it ships with Vue 3.0-beta.
Stay safe, — Damian Dulisz
Stories
GitHub - vuejs/vite: Make Web Dev Fast Again
Vite is an opinionated web dev build tool that serves your code via native ES Module imports during dev and bundles it with Rollup for production.
Announcing Nuxt's $2M seed round
Three years ago, my brother Sébastien and I were open sourcing our code to build Vue.js application server side rendered easily. Today, we are incredibly excited to announce that NuxtJS has raised $2M in seed funding.
#15: Enjoy The Vue: End to End Testing with Amir Rustamzadeh
In this week's episode, we talk with @amirrustam about a topic that many developers often have a love/hate relationship with: end-to-end testing. Be sure to listen to this week's episode if you're looking for a good e2e solution for your Vue app.
#16: Enjoy The Vue: TypeScript with Vue and Vuex with Jack Koppa
A new episode is out featuring @jackpkoppa, who gave a phenomenal talk on TypeScript at @vueconfus! You'll get to hear about what it's like to work with Vue and TypeScript, the common pitfalls of the pairing and how Vue 3 could improve the experience.
Vue.js 3 Course - Composition API, TypeScript, Testing
Vue.js 3 introduces some changes to the Async Component API - find out the changes, and how you can use Async Components with Webpack 5's bundle splitting to make your apps load faster than ever.
Introducing Vue.js 3 Vite A No-Bundle Dev Server For Vue 3 Single File Components Evan You Tutorial
Vite is a Vue.js No-Bundle Development Server for Vue 3 Single File components. It's blazingly fast, and a great way to get started on Vue 3 today! It also has some cool things like HMR (hot module reloading). In this video we look at it getting it running with Vue 4 router too!
Vue 3 Composition API with Filip Rakowski
The Composition API is coming to Vue 3 - but some companies, such as VueStorefront, have been using it for a while with the Vue 2 Composition API plugin. Filip Rakowski, co-founder of VueStorefront, is here to explain the Composition API and how they’ve used it in the next version of their e-commerce framework.
The case for HOC vs The Composition API
In this article Abdelrahman compares Higher-Order Components (using scoped-slots) with the upcoming Composition API. I especially enjoyed the Vee-Validate v4 comparison. Check it out!
State Management with Composition API
The Composition API (and other Vue 3 APIs) simplifies a lot when it comes to state management. Learn how the Composition API has changed the way I manage my application state.
Stale-While-Revalidate Data Fetching Composable with Vue 3 Composition API
When building apps that rely on data from an API, two things are essential: we want our data to be fresh, and we want it fast. The stale-while-revalidate caching pattern helps us to strike a balance between both.
Learn how to use the Vue 3 Composition API to build a data fetching composable implementing the stale-while-revalidate pattern.
Quasar and Browser Extension Development - Getting BEXy
A series of articles that demonstrate Quasar's new BEX mode, that makes it easy to build Vue-based browser extensions.
Example of Using a Watcher
Here’s a pretty smart approach on how Vue’s watchers can be used to simplify the browser’s focus management when adding keyboard control to your components. In this case a navigation component that can be controlled with the arrow keys.
Vuetensils 0.6: Simpler Forms, Better Accessibility, & Useful Filters!
The latest version of Vuetensils has some really cool features: improvements to form authoring, accessibility updates, and new filters to make life easier.
Libraries
GitHub - vuejs/vitepress
Vite & Vue powered static site generator
GitHub - nuxt-community/composition-api
Composition API hooks for Nuxt.
Chakra UI Vue
Chakra UI is a simple modular and accessible component library that gives you the building blocks to build Vue applications with speed. WAI-ARIA compliant components - Constraint Based Design Theming with Design Tokens - Composable UI Primitives - Dark/Light mode components - Nuxt support!
GitHub - unlayer/vue-email-editor
Vue Email Editor is a drag-n-drop email editor component that makes it super easy to add a solid email editor to your Vue.js apps. Designs are saved in JSON and can be exported as HTML.
GitHub - posva/vite-tailwind-starter
Starter using Vite + Tailwind for super fast prototyping
GitHub - kevinfaguiar/vue-twemoji-picker
Vue Twemoji Picker - A fast plug-n-play Twemoji Picker (+textarea for Twemoji rendering) for Vue. Support Unicode Emoji 13.0.