https://github.com/openfext/vue-use

Use Vue Composition API Right Now (WIP)
https://github.com/openfext/vue-use

composition-api hooks vue-composition-api vue-hooks vue-use vuejs

Last synced: about 2 months ago
JSON representation

Use Vue Composition API Right Now (WIP)

• Host: GitHub
• URL: https://github.com/openfext/vue-use
• Owner: openfext
• License: mit
• Created: 2020-03-29T07:20:38.000Z (over 4 years ago)
• Default Branch: develop
• Last Pushed: 2020-06-07T10:45:16.000Z (over 4 years ago)
• Last Synced: 2024-06-19T03:07:16.366Z (3 months ago)
• Topics: composition-api, hooks, vue-composition-api, vue-hooks, vue-use, vuejs
• Language: JavaScript
• Homepage: https://openfext.github.io/vue-use
• Size: 5.76 MB
• Stars: 26
• Watchers: 3
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# Vue Use

Use Vue Composition API Right Now.

**Note**: Currently only Vue.js 2.x is supported. Since [Vue.js](https://github.com/vuejs/vue-next) has released a beta version of 3.0, this library will support the latest version of Vue.js for the first time.

[![CircleCI](https://circleci.com/gh/openfext/vue-use.svg?style=svg)](https://circleci.com/gh/openfext/vue-use)

[![codecov](https://codecov.io/gh/openfext/vue-use/branch/develop/graph/badge.svg)](https://codecov.io/gh/openfext/vue-use)

![GitHub](https://img.shields.io/github/license/openfext/vue-use?style=flat-square)

![Version](https://img.shields.io/npm/v/@fext/vue-use?style=flat-square)

[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/openfext/vue-use)

## Docs

- [Storybook](https://openfext.github.io/vue-use)

### 🇨🇳 Chinese

- [Guide](https://openfext.github.io/docs/zh/vue-use/intro.html)

- [API Reference](https://openfext.github.io/docs/zh/vue-use/api/form.html)

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

```bash

npm i @fext/vue-use

```

### Usage

Create reactive loading state for component:

```html

  
Content


  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

      }

    }

  };

```

## Built With

- [Vue.js](https://github.com/vuejs/vue)

- [Vue Composition API](https://github.com/vuejs/composition-api)

## License

[MIT](http://opensource.org/licenses/MIT)

Copyright (c) 2020 - present, Felix Yang