https://github.com/lianghx-319/vue-hooks
⚡️Awesome Vue Hooks
https://github.com/lianghx-319/vue-hooks
composition-api hooks vue-composition-api vue-hooks vuejs vuejs3
Last synced: 20 days ago
JSON representation
⚡️Awesome Vue Hooks
- Host: GitHub
- URL: https://github.com/lianghx-319/vue-hooks
- Owner: lianghx-319
- License: mit
- Created: 2020-05-24T13:17:42.000Z (almost 5 years ago)
- Default Branch: dev
- Last Pushed: 2022-01-12T23:06:45.000Z (over 3 years ago)
- Last Synced: 2025-04-24T00:04:18.071Z (20 days ago)
- Topics: composition-api, hooks, vue-composition-api, vue-hooks, vuejs, vuejs3
- Language: TypeScript
- Homepage: https://vue-hooks.hanxx.icu
- Size: 1.2 MB
- Stars: 11
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-hooks [](https://www.npmjs.com/package/@hanxx/vue-hooks) [](https://bundlephobia.com/result?p=@hanxx/vue-hooks) [](https://travis-ci.org/lianghx-319/vue-hooks) [](https://codecov.io/gh/lianghx-319/vue-hooks) [](https://lgtm.com/projects/g/lianghx-319/vue-hooks/alerts/) [](https://lgtm.com/projects/g/lianghx-319/vue-hooks/context:javascript) [](https://app.netlify.com/sites/nervous-noyce-43dffd/deploys)
> ⚡️ Awesome Vue Hooks Fork From [@u3u/vue-hooks](https://github.com/u3u/vue-hooks)
First of all, the original repository has no response for more features request, so I start this repository and add some common useful features. Welcome PRs.
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.
Another useful vue-hooks repository is [vue-use-web](https://github.com/Tarektouati/vue-use-web), so some duplicated features will not implement here.
## Install
```sh
yarn add @vue/composition-api @hanxx/vue-hooks
```
## Documentation
Docs are available at
## Usage
> Now don't need `Vue.use(hooks)` to install plugin
```js
// main.js
import Vue from 'vue';
import VueCompositionAPI from '@vue/composition-api';
Vue.use(VueCompositionAPI); // Don't forget to use the plugin!
```
> If use `useDate`, remember installing `dayjs`
```sh
yarn add dayjs
```
```js
// You can use dayjs directly here
import { useDate, dayjs } from '@hanxx/vue-hooks/lib/useDate';
```
> If haven't use `useDate`, `dayjs` is not a necessary dependence
```jsx
import { defineComponent } from '@vue/composition-api';
import { useWindowSize } from '@hanxx/vue-hooks';
export default defineComponent({
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}
);
},
});
```
## 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)):
This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind are welcome!
## License
[MIT](./LICENSE)
