Vue Use

Use Vue Composition API Right Now.

Note: Currently only Vue.js 2.x is supported. Since Vue.js has released a beta version of 3.0, this library will support the latest version of Vue.js for the first time.

Docs

• Storybook

🇨🇳 Chinese

• Guide
• API Reference

🇺🇸 English

WIP...

Features

• ✨ useResize -- track window.innerWidth, window.innerHeight.
• ✨ useLoading -- run asynchronous tasks and set loading status.
• ✨ useForm -- manage model, events of complex form.
• ✨ useFormElement -- create custom form components that support v-model, work with useForm.
• ✨ useTable -- manage data, paging, sorting and filter of complex table.
• ...

More features are coming soon...

Quick Start

Installation

npm i @fext/vue-use

Usage

Create reactive loading state for component:

<template>
  <div :class="{ 'is-loading': loading }">Content</div>
</template>

<script>
  import { useLoading } from '@fext/vue-use';

  export default {
    setup() {
      const { loading, withLoading } = useLoading();

      return {
        loading,
        withLoading
      };
    },

    created() {
      this.withLoading(() => {
        return this.fetchList();
      });
    },

    methods: {
      async fetchList() {
        // remote api
      }
    }
  };
</script>

Built With

• Vue.js
• Vue Composition API

License

MIT

Copyright (c) 2020 - present, Felix Yang