⚡️ Awesome Vue Hooks
Using @vue/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.
@vue/composition-api, if you are using version 1.x please use vue-function-api
yarn add @vue/composition-api @u3u/vue-hooksDocs are available at https://vue-hooks.netlify.com
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!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 (
<div id="app" style={{ width: widthPixel, height: heightPixel }}>
dynamic window size: {width}, {height}
</div>
);
},
});useDate— Usingdayjsto process date.useWindowSize— Trackswindowdimensions.useCounter— Tracks state of a number.usePrevious— Returns the previous state or props.useRouter— A hook forvue-router.useStore— A hook forvuex.useState— A hook formapState.useGetters— A hook formapGetters.useMutations— A hook formapMutations.useActions— A hook formapActions.
- Fork it!
- Create your feature branch:
git checkout -b feat/new-hook - Commit your changes:
git commit -am 'feat(hooks): add a new hook' - Push to the branch:
git push origin feat/new-hook - Submit a pull request :D
Thanks goes to these wonderful people (emoji key):
 u3u 💻 📖 💡 |
This project follows the all-contributors specification. Contributions of any kind are welcome!