Nuxt server side store wont pass the right BaseModel Class to the client

Steps to reproduce

Load data to the store server side Check the data on the client

Expected behavior

The client data should be an FeathersVuex Model, as configured

Actual behavior

The data is a simple javascript object, and even trying to make it a model (Ex. new Model(data)) won’t update it in the store.

System configuration

This started happening in 2.3.1

~/plugins/feathers.js

import feathers from '@feathersjs/feathers'
import rest from '@feathersjs/rest-client'
import axios from 'axios'
import socketio from '@feathersjs/socketio-client'
import auth from '@feathersjs/authentication-client'
import io from 'socket.io-client'
import { CookieStorage } from 'cookie-storage'
import { iff, discard } from 'feathers-hooks-common'
import feathersVuex, { initAuth } from 'feathers-vuex'
const apiUrl = process.env.API_URL
let socket
let restClient
if (process.client) {
  socket = io(apiUrl, { transports: ['websocket'] })
} else {
  restClient = rest(apiUrl)
}
const transport = process.client ? socketio(socket) : restClient.axios(axios)
const storage = new CookieStorage()

const feathersClient = feathers()
  .configure(transport)
  .configure(auth({ storage }))
  .hooks({
    before: {
      all: [
        iff(
          context => ['create', 'update', 'patch'].includes(context.method),
          discard('__id', '__isTemp')
        )
      ]
    }
  })

export default feathersClient

// Setting up feathers-vuex
const { makeServicePlugin, makeAuthPlugin, BaseModel, models, FeathersVuex } = feathersVuex(
  feathersClient,
  {
    serverAlias: 'api', // optional for working with multiple APIs (this is the default value)
    idField: '_id', // Must match the id field in your database table/collection
    whitelist: ['$regex', '$options'],
    enableEvents: process.client
  }
)

export { makeAuthPlugin, makeServicePlugin, BaseModel, models, FeathersVuex, initAuth }

~/store/index.js

import { makeAuthPlugin, initAuth } from '~/plugins/feathers'
const auth = makeAuthPlugin({
  userService: 'user',
  state: {
    publicPages: []
  },
  actions: {
    onInitAuth ({ state, dispatch }, payload) {
      if (payload) {
        dispatch('authenticate', { strategy: 'jwt', accessToken: state.accessToken })
          .then((result) => {
            // handle success like a boss
            // console.log('loged in')
          })
          .catch((error) => {
            // handle error like a boss
            console.log(error)
          })
      }
    }
  }
})

const requireModule = require.context(
  // The path where the service modules live
  './services',
  // Whether to look in subfolders
  false,
  // Only include .js files (prevents duplicate imports`)
  /.js$/
)
const servicePlugins = requireModule
  .keys()
  .map(modulePath => requireModule(modulePath).default)

export const modules = {
}

export const state = () => ({
})

export const mutations = {
}

export const actions = {
  nuxtServerInit ({ commit, dispatch }, { req }) {
    return initAuth({
      commit,
      dispatch,
      req,
      moduleName: 'auth',
      cookieName: 'feathers-jwt'
    })
  },
  nuxtClientInit ({ state, dispatch }, context) {
    if (state.auth.accessToken) {
      return dispatch('auth/onInitAuth', state.auth.payload)
    }
  }
}

export const getters = {
  
}

export const plugins = [ ...servicePlugins, auth ]

[guzz]

I think is a good solution, i can make a PR by the end of this week, probably thursday I can put my hands on it.

[marshallswain]

I haven’t tested the above code, but it should be pretty close to the real deal (minus the TypeScript conversion). I will happily accept a PR if you’d like to put one together. If you don’t have the bandwidth to do it, please let me know and I’ll do it in a few days.