vue-browser-state

    3.0.0 • Public • Published

    Vue Browser State

    npm

    Vue Browser State is a collection of tiny browser-related implementations (around 150 bytes minified & gzipped each) for vue-reactivator.

    It features reactive properties representing:

    Motivation

    Tracking browser state can be tiring since you have to declare a data property, set up an event listener, hold a reference to the event handler and detach it on component destruction.

    This package contains some common browser states and makes using them as reactive properties easy.

    See this example which outputs the current size of the browser viewport:

    <template>
      <div>
        Your browser viewport dimensions are {{ size[0] }}x{{ size[1] }} pixels.
      </div>
    </template>
    
    <script>
    import reactivator from 'vue-reactivator'
    import { viewportSize } from 'vue-browser-state'
    
    export default {
      mixins: [
        reactivator({
          size: viewportSize
        })
      ]
    }
    </script>

    See it in action

    You can take a look at the example above in CodeSandbox. Play around a little bit and resize the preview window, and you will see the numbers update immediately.

    Installation

    Vue Browser State is available on npm:

    npm install vue-reactivator
    npm install vue-browser-state

    After installing, you can include as usual

    // CommonJS
    const browserState = require('vue-browser-state')
    
    // ES module
    import * as browserState from 'vue-browser-state'

    Want to use it in the browser directly? Try unpkg:

    <script src="https://unpkg.com/vue-reactivator"></script>
    <script src="https://unpkg.com/vue-browser-state"></script>

    Note: The implementations are stored in the vueBrowserState global variable.

    Usage

    See how to use implementations with Reactivator in the example above or in the Reactivator docs.

    Viewport Size

    import { viewportSize } from 'vue-browser-state'

    The size of the viewport as a [width, height] array, equals [window.innerWidth, window.innerHeight].

    SSR value: undefined

    Scroll Position

    import { pageScroll } from 'vue-browser-state'

    The scroll position on the page as an [x, y] array, equals [window.scrollX, window.scrollY].

    SSR value: [0, 0]

    Mouse Position

    import { mousePosition } from 'vue-browser-state'

    The mouse position as an [x, y] array, relative to the document root.

    SSR value: undefined

    Attention! This implementation has no initial value as it can only be read when first moving the mouse.

    Internet Connection

    import { online } from 'vue-browser-state'

    Whether the browser is currently connected to the internet (via navigator.onLine).

    SSR value: true

    Ready State

    import { readyState } from 'vue-browser-state'

    The loading state of the current document, as represented by document.readyState.

    SSR value: "loading"

    Page Visibility

    import { visible } from 'vue-browser-state'

    Whether or not the page is currently visible, according to document.hidden.

    SSR value: true

    URL Anchor

    import { hash } from 'vue-browser-state'

    The anchor attached to the current URL (without the leading #).

    SSR value: ""

    Browser Language

    import { language } from 'vue-browser-state'

    The language the user's browser is requesting (per navigator.language).

    SSR value: undefined

    Install

    npm i vue-browser-state

    DownloadsWeekly Downloads

    21

    Version

    3.0.0

    License

    MIT

    Unpacked Size

    30.5 kB

    Total Files

    9

    Last publish

    Collaborators

    • loilo