vue-composable

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.

Built for vue-next and composition-api

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 3

Vue3 aka vue-next is fully supported.

Installing

# @vue/composition-api

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

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

# vue 3

# install with yarn
yarn add vue-composable

# install with npm
npm install 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
• onOutsidePress - Execute callback when click is outside of 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
• VModel - helper to wrap model update into a ref [vue3 only]
• injectFactory - same as inject but allows you to have a factory as default value
• interval - self-remove setInterval on unmount
• lockScroll - lock-scroll component

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

Intl

• dateTimeFormat - Intl.DateTimeFormat
• numberFormat - Intl.NumberFormat
• currencyFormat - CurrencyFormat with Intl.NumberFormat

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

Meta

• Title - reactive document.title

State

• Timeline - Tracks variable history
• Undo - Tracks variable history, to allow undo and redo
• valueSync - syncs variables value, across multiple refs

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
• share - WebShare API

External

New packages needed

• Axios - @vue-composable/axios reactive axios wrapper client
• makeAxios - @vue-composable/axios wrap your axios instance

Information

This is a monorepo project, please check packages

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.

Twitter: @pikax_dev

Build

# install packages
yarn

# build and test for v2
yarn build --version=2
yarn test:vue2

# build and test for v3
yarn build
yarn test

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

Changelog

1.0.0-beta.3 (2020-07-27)

Features

• useInterval: add useInterval composable (#343) (499908e)
• useOnOutsidePress: add useOnOutsidePress composable (#383) (b8fa41f)
• useScrollLock: add useScrollLock composable (#330) (0da2f44)
• useTimeline: add useTimeline composable (#342) (618842b)
• useValueSync: add useValueSync composable (#348) (04f4bbf)