Collection of Vue Composition API utils works for Vue 2.x, 3.x

Collection of Vue Composition API utils works for Vue 2.x,  3.x

Collection of essential Vue Composition API utils works for Vue 2.x and 3.x

Collection of essential Vue Composition API utils works for Vue 2.x and 3.x

Features
  • 0 dependencies; No worry about your bundle size
  • Fully tree shakable; Only take what you want
  • Seamless migration; Works for both Vue 3.x and 2.x
  • Browser compatible; Use it without complex building tools
  • Intractive docs & demos
  • Optional Add-ons; Firebase, vue-i18n, etc
Usage
import { useMouse, usePreferredDark, useLocalStorage } from '@vueuse/core'

new Vue({
  setup() {
    // tracks mouse position
    const { x, y } = useMouse()

    // is user prefers dark theme
    const isDark = usePreferredDark()

    // persist state in localStorage
    const state = useLocalStorage(
      'my-storage', 
      {
        name: 'Apple',
        color: 'red',
      },
    )

    return { x, y, isDark, state }
  }
})
Install

for Vue 3.x

npm i @vueuse/[email protected]

for Vue 2.x with composition-api polyfill

npm i @vue/composition-api @vueuse/[email protected]

Please register the Composition API Plugin before using APIs.

CDN

<!-- For Vue 3.x -->
<script src="https://unpkg.com/@vueuse/[email protected]"></script> 

<!-- For Vue 2.x -->
<script src="https://unpkg.com/@vueuse/[email protected]"></script>

It will be exposed to global variable as window.VueUse

Functions Add-ons

The core package aims to be lightweight and dependence free. While the add-ons are wrapping popular packages into the consistent API style.

  • i18n - Composition wrapper for vue-i18n

    • createI18n
    • useI18n
  • Firebase - enables realtime bindings for Firebase

    • useFirestore
    • useRTDB
Technical Details

The Versioning

For every release, it will release two version of this package. The 3.x.x is used for Vue 3.x and the 2.x.x is used for 2.x. We use the major version number to distinguish the different target version will the minor and patch numbers are shared in both packages.

Different between 3.x and 2.x

Since the Composition API will be available in 3.x. Using it in 2.x require you use a polyfill. For 3.x build, we use the API from @vue/runtime-dom, and for 2.x, it's @vue/composition-api. All the functions exported in this package behaves the same.

// 3.x build
import { ref } from '@vue/runtime-dom'

// 2.x build
import { ref } from '@vue/composition-api'

Demo Download

Setup Vuex in Vue.js 3 Composition API with Example

Setup Vuex in Vue.js 3 Composition API with Example

Setup Vuex in Vue.js 3 Composition API with Example: Vue.js Hooks are awesome. Let's take a look at adding a useStore hook for Vuex in our Vue.js Composition API app!

Setup Vuex in Vue.js 3 Composition API with Example

Vue.js Hooks are awesome. Let's take a look at adding a useStore hook for Vuex in our Vue.js Composition API app!

👉 Source code : https://github.com/ErikCH/Vue-composition-example

Vue.js 3 Composition API Fetch With Example

Vue.js 3 Composition API Fetch With Example

Vue.js Hooks are awesome. Let's take a look at adding a useFetch function for the Vue 3 Composition API

Vue.js Hooks are awesome. Let's take a look at adding a useFetch function for the Vue 3 Composition API.

👉 Source code
https://github.com/ErikCH/Vue-composition-example

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!