vs

vue-sync

Sync and store vue state with browser URL params

Showing:

Popularity

Downloads/wk

211

GitHub Stars

66

Maintenance

Last Commit

2yrs ago

Contributors

0

Package

Dependencies

0

Size (min+gzip)

1.0KB

License

WTFPL

Type Definitions

Tree-Shakeable

No?

Categories

Readme

vue-sync

NOTE: Check out nuxt-url-sync to use it with SSR

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
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.

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.

new Vue({
  data: function() {
    return {
      currentPage: this.currentPage || 'users'
    }
  },
  url: {
    currentPage: {
      param: 'page',
      noHistory: true
    }
  }
})

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100