[NFR] Nuxt support

[ruudboon]

Would be great if this (Amazing lib!) adds Nuxt Universal SSR support.

[mrichar1]

Hi,

Thanks for the suggestion! I've not used Nuxt before, so I'm just going from the docs, but I assume you're referring to what's in the docs here: https://nuxtjs.org/guide/vuex-store#modules-mode

If I'm reading this correctly, I think this could be implemented by doing something like the following.

Create store/jv.js containing:

import axios from 'axios';
import { jsonapiModule } from 'jsonapi-vuex';

api =  axios.create(...)
const { state, mutations, actions, getters } = jsonapiModule(api)
export { state, mutations, actions, getters }

Please try this out and let me know if this works as expected.

[samnight]

If you are using axios module try this.

Include plugin in your nuxt.config.js file:

plugins: ['~/plugins/jsonapi-vuex.js']

And your plugins/jsonapi-vuex.js will look like:

import { jsonapiModule } from 'jsonapi-vuex'

export default function({ $axios, store }) {
  store.registerModule('jv', jsonapiModule($axios))
}

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[alexd73]

Hi! Both methods give the error Unexpected token export.
I written to store/posts.js this

import { jsonapiModule } from 'jsonapi-vuex'

const { state, mutations, actions, getters } = jsonapiModule(this.$axios)
export { state, mutations, actions, getters }

How to I can solve this problem?

[mrichar1]

EDIT: See SamGold05's comment below mine for a proper answer!

Hi - This looks like the module isn't being transpiled properly by Babel.

Assuming you have Nuxt/Babel set up properly, the only thing I've found is a suggestion to do the following, which prevents server-side rendering (which is unsupported):

plugins: [
  {src: '~/plugins/jsonapi-vuex', ssr: false},
]

Afraid I'm just reading docs here, and not a Nuxt user - so if that doesn't work it might be worth following up with the Nuxt community!

[samnight]

In nuxt.config.js add this:

{
  build: {
    transpile: ['jsonapi-vuex']
  }
}

[s1nz]

Hi @mrichar1! I cannot get the status getter to work, there is no 'id' in the Promise. Any ideas?

created() {
    const products = this.$store.dispatch('jv/get', [
      'magento_products',
      {
        params: {
          page: 1
        }
      }
    ])

    console.log(this.$store.getters['jv/status'](products))
  },

'undefined' is what returned :\

[samnight]

Use async function. Action return a promise.

[s1nz]

@samnight thanks, but Axios already returns a Promise. Do I miss something?

[mrichar1]

@s1nz I'm not sure what might be causing the getter id to be missing from the Promise. Please open a new issue so that this one can stay focused on Nuxt support issues - thanks!

[s1nz]

thanks, @mrichar1, I'll create a new issue.