Awesome

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.

GitHub Version

Docs

Storybook

🇨🇳 Chinese

🇺🇸 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

License

MIT