https://github.com/u3u/vue-hooks

⚡️Awesome Vue Hooks
https://github.com/u3u/vue-hooks

vue vue-composition-api vue-function-api vue-hooks vue-use

Last synced: 12 days ago
JSON representation

⚡️Awesome Vue Hooks

• Host: GitHub
• URL: https://github.com/u3u/vue-hooks
• Owner: u3u
• License: mit
• Created: 2019-07-05T13:20:39.000Z (over 5 years ago)
• Default Branch: dev
• Last Pushed: 2023-01-04T03:56:44.000Z (almost 2 years ago)
• Last Synced: 2024-10-28T04:10:20.168Z (17 days ago)
• Topics: vue, vue-composition-api, vue-function-api, vue-hooks, vue-use
• Language: TypeScript
• Homepage: https://vue-hooks.netlify.com
• Size: 2.53 MB
• Stars: 493
• Watchers: 8
• Forks: 33
• Open Issues: 72
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-hooks [![NPM Version](https://img.shields.io/npm/v/@u3u/vue-hooks.svg)](https://www.npmjs.com/package/@u3u/vue-hooks) [![Build Status](https://img.shields.io/travis/u3u/vue-hooks/master.svg)](https://travis-ci.org/u3u/vue-hooks) [![Code Coverage](https://img.shields.io/codecov/c/github/u3u/vue-hooks.svg)](https://codecov.io/gh/u3u/vue-hooks)

> ⚡️ Awesome Vue Hooks

Using [`@vue/composition-api`](https://github.com/vuejs/composition-api) to implement useful vue hooks.  

Vue 3.0 has not been released yet, it allows you to use functional-based components in advance.

⚠️ 2.x has been switched to `@vue/composition-api`, if you are using version 1.x please use [`vue-function-api`](https://npmjs.com/vue-function-api)

## Install

```sh

yarn add @vue/composition-api @u3u/vue-hooks

```

## Documentation [![Netlify Status](https://api.netlify.com/api/v1/badges/e93d1698-f766-4529-b8e0-91fa1162d4cb/deploy-status)](https://app.netlify.com/sites/vue-hooks/deploys)

Docs are available at 

## Usage

[![Edit Vue Hooks Examples](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vue-template-66f2o?expanddevtools=1&fontsize=12&module=%2Fsrc%2FApp.vue)

```js

import Vue from 'vue';

import VueCompositionAPI from '@vue/composition-api';

import hooks from '@u3u/vue-hooks';

Vue.use(hooks);

Vue.use(VueCompositionAPI); // Don't forget to use the plugin!

```

```jsx

import { createComponent } from '@vue/composition-api';

import { useWindowSize } from '@u3u/vue-hooks';

export default createComponent({

  setup() {

    const { width, height, widthPixel, heightPixel } = useWindowSize();

    return { width, height, widthPixel, heightPixel };

  },

  render() {

    const { width, height, widthPixel, heightPixel } = this;

    return (

      


        dynamic window size: {width}, {height}

      

    );

  },

});

```


## Hooks

- [`useDate`](https://vue-hooks.netlify.com/?path=/story/usedate--docs) — Using [`dayjs`](https://github.com/iamkun/dayjs) to process date.

- [`useWindowSize`](https://vue-hooks.netlify.com/?path=/story/usewindowsize--docs) — Tracks `window` dimensions.

- [`useCounter`](https://vue-hooks.netlify.com/?path=/story/usecounter--docs) — Tracks state of a number.

- [`usePrevious`](https://vue-hooks.netlify.com/?path=/story/useprevious--docs) — Returns the previous state or props.

- [`useRouter`](https://vue-hooks.netlify.com/?path=/story/userouter--docs) — A hook for [`vue-router`](https://github.com/vuejs/vue-router).

- [`useStore`](https://vue-hooks.netlify.com/?path=/story/usestore--docs) — A hook for [`vuex`](https://github.com/vuejs/vuex).

- [`useState`](https://vue-hooks.netlify.com/?path=/story/usestate--docs) — A hook for [`mapState`](https://vuex.vuejs.org/api/#mapstate).

- [`useGetters`](https://vue-hooks.netlify.com/?path=/story/usegetters--docs) — A hook for [`mapGetters`](https://vuex.vuejs.org/api/#mapgetters).

- [`useMutations`](https://vue-hooks.netlify.com/?path=/story/usemutations--docs) — A hook for [`mapMutations`](https://vuex.vuejs.org/api/#mapmutations).

- [`useActions`](https://vue-hooks.netlify.com/?path=/story/useactions--docs) — A hook for [`mapActions`](https://vuex.vuejs.org/api/#mapactions).

## Contributing

1. Fork it!

2. Create your feature branch: `git checkout -b feat/new-hook`

3. Commit your changes: `git commit -am 'feat(hooks): add a new hook'`

4. Push to the branch: `git push origin feat/new-hook`

5. Submit a pull request :D

## Contributors

Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):

  

    
u3u
💻 📖 💡 ⚠️

  

This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind are welcome!

## License

[MIT](./LICENSE)