Vue-composable NPM

vue-composable

Vue 3

This version is alpha with support for the vue3 (vue-next)

Check webpack vue3 example or CodeSandbox

Introduction

vue-composable is out-of-box ready to use the brand new Vue 3 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

Installing

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

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

Documentation

NOTE documentation might be slightly wrong, because it was built for the v2

Check our documentation

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

MISC

matchMedia - Reactive matchMedia
breakpoint - reactive breakpoints based on window.innerWidth
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

Promise

Promise - Promise reactive resolve and reject
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

External

New packages needed

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

Examples

Check out the examples folder or start hacking on codesandbox.

NOTE

Currently only works with composition-api, when Vue3 gets release I will update to use the new reactive system (using @vue/reactivity)

For vue-next support please check @next

Usage

<template>
  <div>
    <p>page {{ currentPage }} of {{ lastPage }}</p>
    <p>
      <button @click="prev">prev</button>
      <button @click="next">next</button>
    </p>
    <ul>
      <li v-for="n in result" :key="n">
        {{ n }}
      </li>
    </ul>
  </div>
</template>

<script>
import { useArrayPagination } from "vue-composable";

export default {
  setup() {
    const array = new Array(1000).fill(0).map((_, i) => i);
    const { result, next, prev, currentPage, lastPage } = useArrayPagination(
      array,
      {
        pageSize: 3
      }
    );

    return { result, next, prev, currentPage, lastPage };
  }
};
</script>

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