liaoliaojun/vue-composable

Vue composition-api composable components. i18n, validation, pagination, fetch, etc. +30 variable composable functions

vue-composable

Introduction

vue-composable is out-of-box ready to use composition-api generic components.

100% typescript based composable components and full type support out-of-box.

This library aim is to be one stop shop for many real-world composable functions, with aggressive tree-shaking to keep it light on your end code.

vue-composable is composed by two package @vue-composable/core and @vue-composable/web.

• @vue-composable/core: contains helpers composables, such as Promise and Pagination.
• @vue-composable/web: contains Web API implementations

Vue 3

Support for vue@next on vue3 branch

Installing

# install with yarn
yarn add @vue/composition-api vue-composable

# install with npm
npm install @vue/composition-api vue-composable

Documentation

Check our documentation

Composable

Event

• Event - Attach event listener to a DOM element
• Mouse Move - Attach mousemove listener to a DOM element
• Resize - Attach resize listener to a DOM element
• Scroll - Attach scroll listener to a DOM element

Date

• useNow : Return reactive custom timer with specified refresh rate
• useDateNow : Returns reactive Date.now() with custom refresh rate
• usePerformanceNow : Returns reactive performance.now() with custom refresh rate

Format

• format - Reactive string format
• path - Retrieve object value based on string path

Breakpoint

• MatchMedia - reactive MatchMedia
• Breakpoint - reactive breakpoints based on window.innerWidth
• Chrome - reactive chrome breakpoints
• TailwindCSS - reactive TailwindCSS breakpoints

MISC

• sharedRef - cross-tab reactive ref

Storage

• WebStorage - Reactive access to Storage API, useLocalStorage and useSessionStorage use this
• storage - uses localStorage or on safari private it uses sessionStorage
• localStorage - Reactive access to a localStorage
• sessionStorage - Reactive access to a sessionStorage

Pagination

• Pagination - Generic reactive pagination controls
• Array Pagination - Array pagination

Validation

• Validation - model based validation inspired by vuelidate

i18n

• i18n - Simple i18n implementation with API inspired by vue-i18n

Promise

• Promise - Promise reactive resolve and reject
• promiseLazy - Sugar for usePromise lazy:true
• Cancellable Promise - Allow to cancel promises
• Retry - Provides functionality to retry promise

Web

• Fetch - reactive fetch wrapper
• WebSocket - reactive WebSocket wrapper
• IntersectionObserver - reactive IntersectionObserver
• NetworkInformation - reactive NetworkInformation wrapper
• Online - reactive navigator.onLine wrapper
• PageVisibility - reactive Page Visibility API
• Language - reactive NavigatorLanguage
• BroadcastChannel - reactive BroadcastChannel API
• Geolocation API
• CSS variables - reactive CSS variables
• Worker - Web Worker API
• WorkerFunction - Webworker Function, offload a function to webworker

External

New packages needed

• Axios - @vue-composable/axios reactive axios wrapper client

Information

This is a monorepo project, please check packages or check vue-composable

Contributing

You can contribute raising issues and by helping out with code.

Tests and Documentation are the most important things for me, because good documentation is really useful!

I really appreciate some tweaks or changes on how the documentation is displayed and how to make it easier to read.

I really need an logo for this project, if you have a good idea for a logo, please enter in contact with me, you can find me on the Vue discord : @pikax

New composable

1. Fork it!
2. Create your feature branch: git checkout -b feat/new-composable
3. Commit your changes: git commit -am 'feat(composable): add a new composable'
4. Push to the branch: git push origin feat/new-composable
5. Submit a pull request

License

MIT