Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Integrating vue-router-sync #213

Closed
appsparkler opened this issue Feb 7, 2017 · 11 comments
Labels
Projects
Milestone

Comments

@appsparkler
Copy link

@appsparkler appsparkler commented Feb 7, 2017

Question/Doubt :

Can you please suggest how to integrate vuex-router-sync within the project.

I was following vue-hacker-news example and in that we would import router from the router module and store from the store module and work with vuex-router-sync to sync the two. That was done in the main.js/app.js module which was then exported for client-entry and server-entry modules.

In the NUXT framework we don't have a main.js or app.js file. Please advise where and how to work with the vuex-router-sync library. Where should i import the router and store from and where should i sync the two.

Thanks.

This feature request is available on Nuxt.js community (#c180)
@Atinux

This comment has been minimized.

Copy link
Member

@Atinux Atinux commented Feb 7, 2017

In the upcoming release (v0.9.8), you will be able to use vuex-router-sync this way:

plugins/vuex-router-sync.js

import { sync } from 'vuex-router-sync'
import store from '~store'
import router from '~router'

sync(store, router)

And add the plugin in nuxt.config.js:

module.exports = {
  plugins: [
    '~plugins/vuex-router-sync.js'
  ]
}

I'll keep it open until the release it out 👍

@Atinux Atinux added the enhancement label Feb 7, 2017
@Atinux Atinux added this to the 1.0 milestone Feb 7, 2017
@Atinux Atinux added this to 0.9.8 in Roadmap 1.0 Feb 7, 2017
@appsparkler

This comment has been minimized.

Copy link
Author

@appsparkler appsparkler commented Feb 7, 2017

@Atinux any hacks you can suggest for the time being?

This is what i'm implementing right now :

Send/dispatch the this.$route object with the dispatch method :

// inside a Vue component
...
const route = this.$route
dispatch('FETCH_SOMETHING', { route, storyType })
...

Work with it in mutations/commit

// Immutable is a library to clone things - specifically the route object 
// to avoid mutating original

import Immutable from 'immutable'

// now, in a mutation - commit
...
// removing references to 'matched' and 'meta' objects 
// in the route since we don't need them

state.route = Immutable.Map(route).remove('matched').remove('meta').toJS()
...

Please let me know what you think, if possible, and also if there could be a better way to implement this.

Thanks.

@Atinux

This comment has been minimized.

Copy link
Member

@Atinux Atinux commented Feb 13, 2017

@app-sparkler you can now use my solution below :)

@guumaster

This comment has been minimized.

Copy link

@guumaster guumaster commented Apr 29, 2017

This plugin solution you propose works, but makes dev server crash on every page reload. I'm getting this error:

/my_nuxt_app_path/node_modules/vue-meta/lib/vue-meta.js:824
    var htmlTag = document.getElementsByTagName('html')[0];
                  ^

ReferenceError: document is not defined
    at updateClientMetaInfo (/my_nuxt_app_path/node_modules/vue-meta/lib/vue-meta.js:824:19)
    at Vue$2.refresh (/my_nuxt_app_path/node_modules/vue-meta/lib/vue-meta.js:885:35)
    at /my_nuxt_app_path/node_modules/vue-meta/lib/vue-meta.js:1013:74
    at Timeout._onTimeout (/my_nuxt_app_path/node_modules/vue-meta/lib/vue-meta.js:924:5)
    at ontimeout (timers.js:380:14)
    at tryOnTimeout (timers.js:244:5)
    at Timer.listOnTimeout (timers.js:214:5)

My route is also nested: /something/_slug/_id, and it works again if I remove the plugin plugins/vue-router-sync.js from the list.

@appsparkler

This comment has been minimized.

Copy link
Author

@appsparkler appsparkler commented May 2, 2017

@guumaster document object will not be available on the server. You will have to encapsulate the code in a an if block:

if (process.BROWSER_BUILD) {
  document....
}

Reference : https://nuxtjs.org/faq/window-document-undefined/#window-or-document-undefined-

Good Luck!

@dohomi

This comment has been minimized.

Copy link

@dohomi dohomi commented May 2, 2017

@appsprklr I don't think that @guumaster did any mistake. I rather think that he needs to add the vuex-router-sync only only as a client side plugin.

@appsparkler

This comment has been minimized.

Copy link
Author

@appsparkler appsparkler commented May 2, 2017

Thanks @dohomi

@guumaster here's the reference to work with client-only plugins https://nuxtjs.org/guide/plugins/#client-side-only

@guumaster

This comment has been minimized.

Copy link

@guumaster guumaster commented May 2, 2017

@appsprklr I understand what you said, but that's not the way to solve this particular issue. I've just added vue-router-sync and the server render fails with an unrelated document is undefined error in the vue-meta library. where would you put that if (process.SERVER_BUILD)... ?

The workaround I came up with was to set the plugin as a ssr only, as you also mention. Something like this:

  plugins: [
    { src: '~plugins/vue-router-sync', ssr: false }
  ]

Thanks!

@Muscot

This comment has been minimized.

Copy link

@Muscot Muscot commented Jun 26, 2017

I did have some problem with @Atinux plugin solution.

In the latest version of NUXT you should export a createStore function from the store/index.js instead of a vuex instance. And ofc I don't want to create another instance in my plugin files.

I come up with this solutions:

import { sync } from 'vuex-router-sync'
export default ({app: {store, router}}) => {
  sync(store, router)
}
@adam-lynch

This comment has been minimized.

Copy link

@adam-lynch adam-lynch commented Oct 29, 2017

I'm using @Muscot's example but in a component computed, this.$store.state.route doesn't exist and mapState('route') throws an error. Any ideas?

@lock

This comment has been minimized.

Copy link

@lock lock bot commented Nov 5, 2018

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@lock lock bot locked as resolved and limited conversation to collaborators Nov 5, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
6 participants
You can’t perform that action at this time.