{"id":18879753,"url":"https://github.com/loilo/vue-browser-state","last_synced_at":"2025-08-24T14:38:59.852Z","repository":{"id":47452929,"uuid":"178612151","full_name":"loilo/vue-browser-state","owner":"loilo","description":"🌐 Various browser-related implementations for vue-reactivator","archived":false,"fork":false,"pushed_at":"2024-04-08T04:40:03.000Z","size":20,"stargazers_count":1,"open_issues_count":1,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-14T10:16:05.150Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/loilo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2019-03-30T21:15:30.000Z","updated_at":"2024-04-22T05:25:01.187Z","dependencies_parsed_at":"2022-09-26T18:20:53.687Z","dependency_job_id":"4ebdf24b-6f4f-4656-b6d0-8555faf347df","html_url":"https://github.com/loilo/vue-browser-state","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loilo%2Fvue-browser-state","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loilo%2Fvue-browser-state/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loilo%2Fvue-browser-state/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/loilo%2Fvue-browser-state/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/loilo","download_url":"https://codeload.github.com/loilo/vue-browser-state/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223644535,"owners_count":17178758,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-08T06:39:11.462Z","updated_at":"2024-11-08T06:39:12.217Z","avatar_url":"https://github.com/loilo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue Browser State\n\n[![npm](https://badgen.net/npm/v/vue-browser-state)](https://www.npmjs.com/package/vue-browser-state)\n\nVue Browser State is a collection of tiny browser-related implementations (around 150 bytes minified \u0026 gzipped each) for [`vue-reactivator`](https://npmjs.com/package/vue-reactivator).\n\nIt features reactive properties representing:\n\n- [Viewport Size](#viewport-size)\n- [Scroll Position](#scroll-position)\n- [Mouse Position](#mouse-position)\n- [Internet Connection](#internet-connection)\n- [Ready State](#ready-state)\n- [Page Visibility](#page-visibility)\n- [URL Anchor](#url-anchor)\n- [Browser Language](#browser-language)\n\n## Motivation\n\nTracking 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.\n\nThis package contains some common browser states and makes using them as reactive properties easy.\n\nSee this example which outputs the current size of the browser viewport:\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    Your browser viewport dimensions are {{ size[0] }}x{{ size[1] }} pixels.\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport reactivator from 'vue-reactivator'\nimport { viewportSize } from 'vue-browser-state'\n\nexport default {\n  mixins: [\n    reactivator({\n      size: viewportSize\n    })\n  ]\n}\n\u003c/script\u003e\n```\n\n\u003e **See it in action**\n\u003e\n\u003e You can take a look at the example above [in CodeSandbox](https://codesandbox.io/s/nn5vj1100l). Play around a little bit and resize the preview window, and you will see the numbers update immediately.\n\n## Installation\n\nVue Browser State is available on npm:\n\n```bash\nnpm install vue-reactivator\nnpm install vue-browser-state\n```\n\nAfter installing, you can include as usual\n\n```js\n// CommonJS\nconst browserState = require('vue-browser-state')\n\n// ES module\nimport * as browserState from 'vue-browser-state'\n```\n\n---\n\nWant to use it in the browser directly? Try unpkg:\n\n```html\n\u003cscript src=\"https://unpkg.com/vue-reactivator\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/vue-browser-state\"\u003e\u003c/script\u003e\n```\n\n\u003e **Note:** The implementations are stored in the `vueBrowserState` global variable.\n\n## Usage\n\nSee how to use implementations with Reactivator in the [example above](#motivation) or in the [Reactivator docs](https://github.com/Loilo/vue-reactivator#usage).\n\n### Viewport Size\n\n```js\nimport { viewportSize } from 'vue-browser-state'\n```\n\nThe size of the viewport as a `[width, height]` array, equals `[window.innerWidth, window.innerHeight]`.\n\n**SSR value:** `undefined`\n\n### Scroll Position\n\n```js\nimport { pageScroll } from 'vue-browser-state'\n```\n\nThe scroll position on the page as an `[x, y]` array, equals `[window.scrollX, window.scrollY]`.\n\n**SSR value:** `[0, 0]`\n\n### Mouse Position\n\n```js\nimport { mousePosition } from 'vue-browser-state'\n```\n\nThe mouse position as an `[x, y]` array, relative to the document root.\n\n**SSR value:** `undefined`\n\n\u003e **Attention!** This implementation has no initial value as it can only be read when first moving the mouse.\n\n### Internet Connection\n\n```js\nimport { online } from 'vue-browser-state'\n```\n\nWhether the browser is currently connected to the internet (via [`navigator.onLine`](https://developer.mozilla.org/docs/Web/API/NavigatorOnLine/onLine)).\n\n**SSR value:** `true`\n\n### Ready State\n\n```js\nimport { readyState } from 'vue-browser-state'\n```\n\nThe loading state of the current document, as represented by [`document.readyState`](https://developer.mozilla.org/docs/Web/API/Document/readyState).\n\n**SSR value:** `\"loading\"`\n\n### Page Visibility\n\n```js\nimport { visible } from 'vue-browser-state'\n```\n\nWhether or not the page is currently visible, according to [`document.hidden`](https://developer.mozilla.org/docs/Web/API/Document/hidden).\n\n**SSR value:** `true`\n\n### URL Anchor\n\n```js\nimport { hash } from 'vue-browser-state'\n```\n\nThe anchor attached to the current URL (without the leading `#`).\n\n**SSR value:** `\"\"`\n\n### Browser Language\n\n```js\nimport { language } from 'vue-browser-state'\n```\n\nThe language the user's browser is requesting (per [`navigator.language`](https://developer.mozilla.org/docs/Web/API/NavigatorLanguage/language)).\n\n**SSR value:** `undefined`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Floilo%2Fvue-browser-state","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Floilo%2Fvue-browser-state","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Floilo%2Fvue-browser-state/lists"}