https://github.com/buhrmi/vue-sync

Vue plugin that syncs state with URL params
https://github.com/buhrmi/vue-sync

Last synced: 8 days ago
JSON representation

Vue plugin that syncs state with URL params

• Host: GitHub
• URL: https://github.com/buhrmi/vue-sync
• Owner: buhrmi
• Created: 2016-09-30T04:20:22.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2022-11-08T09:27:13.000Z (about 2 years ago)
• Last Synced: 2024-07-27T14:13:10.084Z (4 months ago)
• Language: JavaScript
• Homepage: https://buhrmi.github.io/vue-sync
• Size: 27.3 KB
• Stars: 64
• Watchers: 6
• Forks: 2
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# vue-sync

> NOTE: Check out [nuxt-url-sync](https://github.com/buhrmi/nuxt-url-sync) to for a version optimized for nuxt

> NOTE2: This is unmaintained as I've switched to [Svelte](https://svelte.dev) as should you.

Sync Vue Component state with browser URL params

Makes for easy bookmarking and sharing of vue state using the browser URL, also works server-side when using vue-router.

## Install

### With NPM

    $ npm install --save vue-sync

```js

VueSync = require('vue-sync')

Vue.use(VueSync)

```

## Usage

Sync Vue state with parameters in the browser url. Makes for very easy bookmarking and sharing of vue state.

The below example will sync the value of `currentPage` with the URL parameter value `page`.

```js

new Vue({

  data: function() {

    return {

      currentPage: this.currentPage || 'users' // initialize this component data with the url param or set 'users' as a default

    }

  },

  // sync with URL `http://example.com/?page=amazing-title`

  url: {

    currentPage: 'page'

  }

})

```

If you don't want to add a browser history entry when the value changes, use the `noHistory` option.

  

```js

new Vue({

  data: function() {

    return {

      currentPage: this.currentPage || 'users'

    }

  },

  url: {

    currentPage: {

      param: 'page',

      noHistory: true

    }

  }

})

```