Evan You previewed Vue 3 this morning during his keynote talk at <a href="https://vuetoronto.com/" target="_blank">Vue Toronto</a>. By taking advantage of new abilities enabled by modern browsers, Vue 3 will be an improved evolution of the Vue.js we already know and love.
Evan You previewed Vue 3 this morning during his keynote talk at Vue Toronto. By taking advantage of new abilities enabled by modern browsers, Vue 3 will be an improved evolution of the Vue.js we already know and love.
Evan and the Vue team’s goal is to make the transition to Vue 3 as smooth as possible, where the changes are invisibly improving the framework.
Making it Faster
While Vue is already quite fast, Evan shared that Vue 3 will be even faster. Here’s how…
Virtual DOM Rewrite
With the Virtual DOM being rewritten from the ground up, we can expect more compile-time hints to reduce runtime overhead. And the rewrite will include more efficient code to create virtual nodes.
If you want to learn more about what this code is doing, we talk about the Virtual Dom in my Advanced Components course.
Currently in Vue, when a parent component re-renders, its child(ren) also has to re-render. With Vue 3, the parent and child can be re-rendered separately.
Static Tree Hoisting
With static tree hoisting, this means Vue 3’s compiler will be able to detect what is static and then hoist it out, reducing the cost of rendering. It’ll be able to skip patching entire trees.
Static Props Hoisting
Additionally, we can expect static props hoisting, where Vue 3 will skip patching nodes that aren’t going to change.
Currently, under the hood Vue’s reactivity system is using getters and setters with Object.defineProperty. However, Vue 3 will use ES2015 proxies for its observation mechanism. This removes caveats that previously existed, doubles the speed, and uses half of the memory.
In order to continue to support IE11, Vue 3 will ship a build that supports both the old observation mechanism and the new proxy version.
Making it Smaller
Vue is already quite small, at around 20kb gzipped at runtime. But we can expect it to get even more compact, at 10kb gzipped for the new core runtime. This will be accomplished in large part by eliminating the libraries you’re not using (aka Tree Shaking). For example, if you’re not using the transition element, it won’t be included.
Making it More Maintainable
While the majority of Vue developers aren’t working on the library itself, it’s good to know that Vue 3 will bring more maintainable source code. Not only will it be using TypeScript, but many packages will be decoupled making everything more modular.
Making it Easier to Target Native
The runtime core will also be platform agnostic, making it even easier to use Vue with any platform (ex. Web, iOS, or Android).
Making Your Life Easier
The Observer module has been extracted into its own package, allowing you to use it in new ways:
It’s also going to be easier to trace where a re-render was triggered. During his talk, Evan did some live coding and showed how to trace through a Vue app (using the code below) to figure out what triggered a component to re-render. This will be quite useful in bigger applications and performance fine-tuning.
Vue 3.0 will also have Improved TypeScript support, allowing for a new level of type checking and useful errors & warnings inside your editor.
Experimental Hooks API
When we need to share behavior between two components in Vue, we typically use Mixins. However, Evan is experimenting with a Hooks API that avoids some of the gotchas from Mixins, and fits better with idiomatic Vue code.
When you have lots of components that are all trying to re-render at the same time, any browser can start crawling, making the user experience difficult.
Evan showed how he’s experimenting with Time Slicing, breaking up JS execution into segments that yield to the browser if there’s user interaction to be processed.
I already enjoy coding with Vue, and I’m excited to see improvements on the horizon that make Vue more competitive, modular, easier to debug, and enjoyable to develop. There’s no release date on this one, other than “late next year.”
In this article, I will collect 10 Vue icon component to bring more interactivity, better UI design to your Vue application.
Icons are the vital element of the user interface of the product enabling successful and effective interaction with it. In this article, I will collect 10 Vue icon component to bring more interactivity, better UI design to your Vue application.1. Animated SweetAlert Icons for Vue
A clean and simple Vue wrapper for SweetAlert's fantastic status icons. This wrapper is intended for users who are interested in just the icons. For the standard SweetAlert modal with all of its bells and whistles, you should probably use Vue-SweetAlert 2vue-svg-transition
Create 2-state, SVG-powered animated icons.Vue-Awesome
Awesome SVG icon component for Vue.js, with built-in Font Awesome icons.vue-transitioning-result-icon
Transitioning Result Icon for Vue.js
A scalable result icon (SVG) that transitions the state change, that is the SVG shape change is transitioned as well as the color. Demonstration can be found here.
A transitioning (color and SVG) result icon (error or success) for Vue.vue-zondicons
Easily add Zondicon icons to your vue web project.vicon
Vicon is an simple iconfont componenet for vue.
iconfont is a Vector Icon Management & Communication Platform made by Alimama MUX.
A tool to create svg icon components. (vue 2.x)vue-material-design-icons
This library is a collection of Vue single-file components to render Material Design Icons, sourced from the MaterialDesign project. It also includes some CSS that helps make the scaling of the icons a little easier.vue-ionicons
Vue Icon Set Components from Ionic Team
Design Icons, sourced from the Ionicons project.vue-ico
Dead easy, Google Material Icons for Vue.
This package's aim is to get icons into your Vue.js project as quick as possible, at the cost of all the bells and whistles.
I hope you like them!
Markdown is a way to style text on the web. The 10 Vue markdown components below will give you a clear view.
Markdown is a way to style text on the web. You control the display of the document; formatting words as bold or italic, adding images, and creating lists are just a few of the things we can do with Markdown.
The 10 Vue markdown components below will give you a clear view.1. Vue Showdown
Use showdown as a Vue component.showdown-markdown-editor
A markdown editor using codemirror and previewer using showdown for Vue.js.markdown-it-vue
The vue lib for markdown-it.perfect-markdown
perfect-markdown is a markdown editor based on Vue & markdown-it. The core is inspired by the implementation of mavonEditor, so perfect-markdown has almost all of the functions of mavonEditor. What's more, perfect-markdown also extends some features based on mavonEditor.v-markdown-editor
Vue.js Markdown Editor component.markdown-to-vue-loader
Markdown to Vue component loader for Webpack.fo-markdown-note Component for Vue.js
fo-markdown-note is a Vue.js component that provides a simple Markdown editor that can be included in your Vue.js project.
Markdown Editor component for Vue.js. Support both vue1.0 & vue2.0mavonEditor
A nice vue.js markdown editor. Support WYSIWYG editing mode, reading mode and so on.vue-markdown
A Powerful and Highspeed Markdown Parser for Vue.
Thank for read!
Vue input component gives you a baseline to create your own custom inputs. It consists of a prepend/append slot, messages, and a default slot. In this article I will share 15 Vue input components to you.
Vue input component gives you a baseline to create your own custom inputs. It consists of a prepend/append slot, messages, and a default slot. In this article I will share 15 Vue input components to you.1. Maska
A vue component that wraps a input type=number with a customizable range slider flyout with 2-way binding.
International Telephone Input with Vue.
Allow restricted character sets in input elements.
The Vue Currency Input plugin allows an easy input of currency formatted numbers.
Input components for vue.js.
Simple example of issue I am seeing with input labels.
A Vue.js wrapper for Zurb's Tribute library for native @mentions.
Number input with rich functionality for Vue.js.
Super tiny input mask library for vue.js based on PureMask.js (~2kb) exposed as directive. No dependencies.
mask directive for vue.js
An ip address input with port and material design support.
Tiny input/directive mask for currency
Dead simple masked input component for Vue.js 2.X. Based on inputmask-core.
Mobile & Desktop friendly VueJS input component
I hope you like them!