Vue 2.6 released

Vue 2.6 released

<strong>Vue 2.6&nbsp;released</strong>

Vue 2.6 released

Yesterday we just celebrated the 5th Vueniversary — today we are excited to announce the release of Vue 2.6 “Macross”!

In the past year, we spent a lot of time working on the new CLI and prototyping for 3.0. As a result, Vue core 2.x hasn’t received major updates in quite a while. It’s about time! This release combines a number of substantial improvements, internal changes and new features which are highlighted in this post. For full details, make sure to also check out the full release note on GitHub.

Slots: New Syntax, Performance Improvements & Alignment with 3.0

Slots is an important mechanism that enables flexible component composition in Vue. During the prototyping for 3.0 we discovered a number of ways to improve it. Some of these can be introduced without breaking changes, which allows us to ship them in a 2.x minor release. For those that do require breaking changes, we are also trying to provide progressive alternatives in 2.x that would make future migrations easier.

New Syntax

The first step is the new syntax of scoped slots. We proposed, discussed and experimented with a number of different designs (1, 2, 3) and eventually landed on the new v-slot syntax outlined in this RFC. Here is a brief example using named slots:

slot-example.html

<my-component>
  <template v-slot:header>
    <p>Header</p>
  </template>
  
  <template v-slot:item="{ data }">
    <h2>{{ data.title }}</h2>
    <p>{{ data.text }}</p>
  </template>
  
  <template v-slot:footer>
    <p>Footer</p>
  </template>
</my-component>

The new syntax unifies the usage of normal and scoped slots in a single directive, and enforces more explicit and readable named slots usage. It is also fully compatible with the existing syntax, which allows us to ship it today in 2.6.

If you are already familiar with the existing slot syntax, we recommend you to read through the RFC to better understand the rationale behind the new syntax. If you are not yet familiar with slots, it is recommended to go through the updated slots documentation instead.

Performance Improvements

Another improvement for slots we would like to see in 3.0 is the unification of normal vs. scoped slots in terms of implementation, due to the performance advantage of scoped slots. Normal slots are rendered during the parent’s render cycle. When a dependency of a slot changes, it causes both the parent and child components to re-render. Scoped slots, on the other hand, are compiled into inline functions and called during the child component’s render cycle. This means any data dependencies relied on by a scoped slot are collected by the child component, resulting in more precise updates. In 2.6, we have introduced an optimization that further ensures parent scope dependency mutations only affect the parent and would no longer force the child component to update if it uses only scoped slots.

In addition:

  • All slots using the new v-slot syntax are compiled into scoped slots. This means all slots using the new syntax automatically get the performance improvements;
  • All normal slots are now also exposed on this.$scopedSlots as functions. This means users using render functions instead of templates can now always use this.$scopedSlots without worrying what type of slots are being passed in.

In 3.0, there will no longer be the distinction between scoped vs. non-scoped slots — all slots will use the same unified syntax, are compiled into the same format, and have the same optimal performance.

Async Error Handling

Vue’s built-in error handling mechanism (in-component errorCaptured hook and the global errorHandler hook) now also captures errors inside v-on handlers. In addition, if any of your lifecycle hooks or event handlers performs asynchronous operations, you can now return a Promise from the function so that any uncaught errors from that Promise chain are also sent to your error handlers. It becomes even easier if you are using async/await, since async functions implicitly return Promises:

async-error.js

export default {
  async mounted() {
    // if an async error is thrown here, it now will get
    // caught by errorCaptured and Vue.config.errorHandler
    this.posts = await api.getPosts()
  }
}

Dynamic Directive Arguments

Directive arguments can now accept dynamic JavaScript expressions:

dynamic-directive-argument.html

<div v-bind:[attr]="value"></div>
<div :[attr]="value"></div>

<button v-on:[event]="handler"></button>
<button @[event]="handler"></button>

<my-component>
  <template v-slot:[slotName]>
    Dynamic slot name
  </template>
</my-component>

More details can be found in this RFC. Conveniently, if the argument value is null, the binding/listener will be removed.

Note to library authors: this feature requires the Vue runtime to be of version 2.6.0 or higher. If you ship pre-compiled components and want to maintain compatibility with versions before 2.6, avoid using this in your source code.### Code Frame in Compiler Warning Messages

Thanks to the stellar pull request by GitHub user @gzzhanghao, starting in 2.6 most template compilation warnings now comes with source range information. This has enabled us to generate nice code frames for these warnings:

Explicit Creation of Standalone Reactive Objects

2.6 introduces a new global API to explicitly create standalone reactive objects:

observable.js

const reactiveState = Vue.observable({
  count: 0
})

The resulting object can be used directly in computed properties or render functions, and will trigger appropriate updates when mutated.

Data Pre-fetching during Server Side Rendering

The new [serverPrefetch]([https://ssr.vuejs.org/api/#serverprefetch)](https://ssr.vuejs.org/api/#serverprefetch) "https://ssr.vuejs.org/api/#serverprefetch)") hook allows any component (instead of just route-level components) to pre-fetch data during server-side rendering, allowing for more flexible usage and reducing the coupling between data fetching and the router. Projects like Nuxt and vue-apollo are already planning to simplify their implementations using this new feature.

ES Module Build for Direct Import

Previously, our ES Module build is primarily intended for use with bundlers. These builds contain usage of environment variables that are meant to be replaced at compile time. Vue 2.6 now also provides an ES Module build that are intended for direct in-browser usage:

esm.html

<script type="module">
import Vue from 'https://unpkg.com/vue/dist/vue.esm.browser.js'
  
new Vue({
  // ...
})
</script>

Important Internal Changes

Reverting nextTick to Microtask

In 2.5.0 we made an internal adjustment that caused nextTickto use Macrotasks instead of Microtasks to queue updates if the update was triggered in a v-on event handler. This was originally intended to fix some browser edge cases, but has in turn led to a number of other issues. In 2.6 we have found a simpler fix for the original issue, which allows us to revert nextTick to consistently use Microtasks in all cases.

If you are interested in more technical details, check it out here.

Functions on this.$scopedSlots now always return Arrays

(This change only affects render function users.) In render functions, scoped slots are exposed on this.$scopedSlots as functions. Up until now, calling a scoped slot function can return a single VNode or an Array of VNodes based on what the parent component is passing in. This was honestly an oversight as it makes the return value type indeterministic and can lead to unintended edge cases. In 2.6, scoped slot functions are now guaranteed to return either an Array of VNodes or undefined. This may affect some existing code if it is not properly checking for possible Array return values. More details here.

Shoutouts

Thanks to the contributors who contributed pull requests in this release, and to all the community members that participated in the RFC discussions.

Recommended Courses:

Learn by Doing: Vue JS 2.0 the Right Way

Vue.js 2 Essentials: Build Your First Vue App

Getting started with Vuejs for development

Horizontal Feed Component with Sass and VueJs 2

Learn Vue 1 JS introduction to simple reactive JavaScript

Vue 2.6 released

Yesterday we just celebrated the 5th Vueniversary — today we are excited to announce the release of Vue 2.6 “Macross”!

In the past year, we spent a lot of time working on the new CLI and prototyping for 3.0. As a result, Vue core 2.x hasn’t received major updates in quite a while. It’s about time! This release combines a number of substantial improvements, internal changes and new features which are highlighted in this post. For full details, make sure to also check out the full release note on GitHub.

Slots: New Syntax, Performance Improvements & Alignment with 3.0

Slots is an important mechanism that enables flexible component composition in Vue. During the prototyping for 3.0 we discovered a number of ways to improve it. Some of these can be introduced without breaking changes, which allows us to ship them in a 2.x minor release. For those that do require breaking changes, we are also trying to provide progressive alternatives in 2.x that would make future migrations easier.

New Syntax

The first step is the new syntax of scoped slots. We proposed, discussed and experimented with a number of different designs (1, 2, 3) and eventually landed on the new v-slot syntax outlined in this RFC. Here is a brief example using named slots:

slot-example.html

<my-component>
  <template v-slot:header>
    <p>Header</p>
  </template>
  
  <template v-slot:item="{ data }">
    <h2>{{ data.title }}</h2>
    <p>{{ data.text }}</p>
  </template>
  
  <template v-slot:footer>
    <p>Footer</p>
  </template>
</my-component>

The new syntax unifies the usage of normal and scoped slots in a single directive, and enforces more explicit and readable named slots usage. It is also fully compatible with the existing syntax, which allows us to ship it today in 2.6.

If you are already familiar with the existing slot syntax, we recommend you to read through the RFC to better understand the rationale behind the new syntax. If you are not yet familiar with slots, it is recommended to go through the updated slots documentation instead.

Performance Improvements

Another improvement for slots we would like to see in 3.0 is the unification of normal vs. scoped slots in terms of implementation, due to the performance advantage of scoped slots. Normal slots are rendered during the parent’s render cycle. When a dependency of a slot changes, it causes both the parent and child components to re-render. Scoped slots, on the other hand, are compiled into inline functions and called during the child component’s render cycle. This means any data dependencies relied on by a scoped slot are collected by the child component, resulting in more precise updates. In 2.6, we have introduced an optimization that further ensures parent scope dependency mutations only affect the parent and would no longer force the child component to update if it uses only scoped slots.

In addition:

  • All slots using the new v-slot syntax are compiled into scoped slots. This means all slots using the new syntax automatically get the performance improvements;
  • All normal slots are now also exposed on this.$scopedSlots as functions. This means users using render functions instead of templates can now always use this.$scopedSlots without worrying what type of slots are being passed in.

In 3.0, there will no longer be the distinction between scoped vs. non-scoped slots — all slots will use the same unified syntax, are compiled into the same format, and have the same optimal performance.

Async Error Handling

Vue’s built-in error handling mechanism (in-component errorCaptured hook and the global errorHandler hook) now also captures errors inside v-on handlers. In addition, if any of your lifecycle hooks or event handlers performs asynchronous operations, you can now return a Promise from the function so that any uncaught errors from that Promise chain are also sent to your error handlers. It becomes even easier if you are using async/await, since async functions implicitly return Promises:

async-error.js

export default {
  async mounted() {
    // if an async error is thrown here, it now will get
    // caught by errorCaptured and Vue.config.errorHandler
    this.posts = await api.getPosts()
  }
}

Dynamic Directive Arguments

Directive arguments can now accept dynamic JavaScript expressions:

dynamic-directive-argument.html

<div v-bind:[attr]="value"></div>
<div :[attr]="value"></div>

<button v-on:[event]="handler"></button>
<button @[event]="handler"></button>

<my-component>
  <template v-slot:[slotName]>
    Dynamic slot name
  </template>
</my-component>

More details can be found in this RFC. Conveniently, if the argument value is null, the binding/listener will be removed.

Note to library authors: this feature requires the Vue runtime to be of version 2.6.0 or higher. If you ship pre-compiled components and want to maintain compatibility with versions before 2.6, avoid using this in your source code.### Code Frame in Compiler Warning Messages

Thanks to the stellar pull request by GitHub user @gzzhanghao, starting in 2.6 most template compilation warnings now comes with source range information. This has enabled us to generate nice code frames for these warnings:

Explicit Creation of Standalone Reactive Objects

2.6 introduces a new global API to explicitly create standalone reactive objects:

observable.js

const reactiveState = Vue.observable({
  count: 0
})

The resulting object can be used directly in computed properties or render functions, and will trigger appropriate updates when mutated.

Data Pre-fetching during Server Side Rendering

The new [serverPrefetch]([https://ssr.vuejs.org/api/#serverprefetch)](https://ssr.vuejs.org/api/#serverprefetch) "https://ssr.vuejs.org/api/#serverprefetch)") hook allows any component (instead of just route-level components) to pre-fetch data during server-side rendering, allowing for more flexible usage and reducing the coupling between data fetching and the router. Projects like Nuxt and vue-apollo are already planning to simplify their implementations using this new feature.

ES Module Build for Direct Import

Previously, our ES Module build is primarily intended for use with bundlers. These builds contain usage of environment variables that are meant to be replaced at compile time. Vue 2.6 now also provides an ES Module build that are intended for direct in-browser usage:

esm.html

<script type="module">
import Vue from 'https://unpkg.com/vue/dist/vue.esm.browser.js'
  
new Vue({
  // ...
})
</script>

Important Internal Changes

Reverting nextTick to Microtask

In 2.5.0 we made an internal adjustment that caused nextTickto use Macrotasks instead of Microtasks to queue updates if the update was triggered in a v-on event handler. This was originally intended to fix some browser edge cases, but has in turn led to a number of other issues. In 2.6 we have found a simpler fix for the original issue, which allows us to revert nextTick to consistently use Microtasks in all cases.

If you are interested in more technical details, check it out here.

Functions on this.$scopedSlots now always return Arrays

(This change only affects render function users.) In render functions, scoped slots are exposed on this.$scopedSlots as functions. Up until now, calling a scoped slot function can return a single VNode or an Array of VNodes based on what the parent component is passing in. This was honestly an oversight as it makes the return value type indeterministic and can lead to unintended edge cases. In 2.6, scoped slot functions are now guaranteed to return either an Array of VNodes or undefined. This may affect some existing code if it is not properly checking for possible Array return values. More details here.

Shoutouts

Thanks to the contributors who contributed pull requests in this release, and to all the community members that participated in the RFC discussions.

Recommended Courses:

Learn by Doing: Vue JS 2.0 the Right Way

Vue.js 2 Essentials: Build Your First Vue App

Getting started with Vuejs for development

Horizontal Feed Component with Sass and VueJs 2

Learn Vue 1 JS introduction to simple reactive JavaScript

10 Best Vue Icon Component For Your Vue.js App

10 Best Vue Icon Component For Your Vue.js App

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 2

Demo: https://vue-sweetalert-icons.netlify.com/

Download: https://github.com/JorgenVatle/vue-sweetalert-icons/archive/master.zip

2. vue-svg-transition

Create 2-state, SVG-powered animated icons.

Demo: https://codesandbox.io/s/6v20q76xwr

Download: https://github.com/kai-oswald/vue-svg-transition/archive/master.zip

3. Vue-Awesome

Awesome SVG icon component for Vue.js, with built-in Font Awesome icons.

Demo: https://justineo.github.io/vue-awesome/demo/

Download: https://github.com/Justineo/vue-awesome/archive/master.zip

4. 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.

Demo: https://transitioning-result-icon.dexmo-hq.com/

Download: https://github.com/dexmo007/vue-transitioning-result-icon/archive/master.zip

5. vue-zondicons

Easily add Zondicon icons to your vue web project.

Demo: http://www.zondicons.com/icons.html

Download: https://github.com/TerryMooreII/vue-zondicons/archive/master.zip

6. vicon

Vicon is an simple iconfont componenet for vue.

iconfont
iconfont is a Vector Icon Management & Communication Platform made by Alimama MUX.

Download: https://github.com/Lt0/vicon/archive/master.zip

7. vue-svgicon

A tool to create svg icon components. (vue 2.x)

Demo: https://mmf-fe.github.io/vue-svgicon/v3/

Download: https://github.com/MMF-FE/vue-svgicon/archive/master.zip

8. 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.

Demo: https://gitlab.com/robcresswell/vue-material-design-icons

Download: https://gitlab.com/robcresswell/vue-material-design-icons/tree/master

9. vue-ionicons

Vue Icon Set Components from Ionic Team

Design Icons, sourced from the Ionicons project.

Demo: https://mazipan.github.io/vue-ionicons/

Download: https://github.com/mazipan/vue-ionicons/archive/master.zip

10. 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.

Demo: https://material.io/resources/icons/?style=baseline

Download: https://github.com/paulcollett/vue-ico/archive/master.zip

I hope you like them!

Collection of 10 Vue Markdown Component for Vue.js App in 2020

Collection of 10 Vue Markdown Component for Vue.js App in 2020

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.

View Demo

Download Source

2. showdown-markdown-editor

A markdown editor using codemirror and previewer using showdown for Vue.js.

View Demo

Download Source

3. markdown-it-vue

The vue lib for markdown-it.

View Demo

Download Source

4. 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.

View Demo

Download Source

5. v-markdown-editor

Vue.js Markdown Editor component.

View Demo

Download Source

6. markdown-to-vue-loader

Markdown to Vue component loader for Webpack.

View Demo

Download Source

7. 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.

fo-markdown-note is a thin Vue.js wrapper around the SimpleMDE Markdown editor JavaScript control.

View Demo

Download Source

8. Vue-SimpleMDE

Markdown Editor component for Vue.js. Support both vue1.0 & vue2.0

View Demo

Download Source

9. mavonEditor

A nice vue.js markdown editor. Support WYSIWYG editing mode, reading mode and so on.

View Demo

Download Source

10. vue-markdown

A Powerful and Highspeed Markdown Parser for Vue.

View Demo

Download Source

Thank for read!

Collection of 15 Vue Input Component for Your Vue.js App

Collection of 15 Vue Input Component for Your Vue.js App

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
  • No dependencies
  • Small size (~2 Kb gziped)
  • Ability to define custom tokens
  • Supports repeat symbols and dynamic masks
  • Works on any input (custom or native)

Demo

Download


2. v-range-flyout

A vue component that wraps a input type=number with a customizable range slider flyout with 2-way binding.

Demo

Download


3. vue-tel-input

International Telephone Input with Vue.

Demo

Download


4. Restricted Input

Allow restricted character sets in input elements.

Features

  • Disallow arbitrary characters based on patterns
  • Maintains caret position
  • Format/Update on paste
  • Works in IE11+

Demo

Download


5. Vue Currency Input

The Vue Currency Input plugin allows an easy input of currency formatted numbers.

Demo

Download


6. vue-fields

Input components for vue.js.

Demo

Download


7. vue-material-input

Simple example of issue I am seeing with input labels.

Demo

Download


8. vue-tribute

A Vue.js wrapper for Zurb's Tribute library for native @mentions.

Demo

Download


9. vue-number-smarty

Number input with rich functionality for Vue.js.

Features

  • integer/float
  • signed/unsigned
  • step size
  • increment/decrement value by scrolling when focused
  • align variants
  • min and max boundaries
  • max length of integer part (only for float type)
  • max length of float part (only for float type)
  • max length of string
  • error state
  • readonly state
  • theme options

Demo

Download


10. Vue input mask

Super tiny input mask library for vue.js based on PureMask.js (~2kb) exposed as directive. No dependencies.

Demo

Download


11. vue-r-mask

mask directive for vue.js

  • Template similar to javascript regular expression. /\d{2}/
  • Directive useful for your own input or textarea.
  • Arbitrary number of digits in template /\d{1,10}/

Demo

Download


12. Vue IP

An ip address input with port and material design support.

Demo

Download


13. v-money Mask for Vue.js

Tiny input/directive mask for currency

Features

  • Lightweight (<2KB gzipped)
  • Dependency free
  • Mobile support
  • Component or Directive flavors
  • Accept copy/paste
  • Editable

Demo

Download


14. Vue Masked Input

Dead simple masked input component for Vue.js 2.X. Based on inputmask-core.

Demo

Download


15. VueJS input component

Mobile & Desktop friendly VueJS input component
Features used
CSS variables
Vue's transition-group
Flexbox

Demo


I hope you like them!