Skip to content
Sync and store vue state with browser URL params
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs
.gitignore
README.md
index.js
package.json

README.md

vue-sync

NOTE: Please check out nuxt and nuxt-url-sync, since it does almost the same as this plugin while being way more progressive.

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
    }
  }
})
You can’t perform that action at this time.