Integration with Nuxt

[silvestreh]

So, like I mentioned on Slack, I'm having a hard time trying to add feathers-vuex into a Feathers + Nuxt starting template I'm working on (repo can be found here.)

Since Nuxt enforces a directory structure and it somewhat abstracts you from how a Vue app is made (taking away things like webpack's config, or, more importantly, your Vue app's entry point) it becomes harder to determine which is the best place for initializing the Feathers client.

Steps to reproduce

With the above in mind, I replaced Nuxt's default layout with my own which looks like this:

<template>
  <nuxt />
</template>

<script>
import '~feathers'; // This is the feathers client

export default {
  name: 'default-layout',
};
</script>

And this is my Feathers client code:

import feathers from 'feathers/client';
import auth from 'feathers-authentication-client';
import hooks from 'feathers-hooks';
import feathersVuex from 'feathers-vuex';
import socketio from 'feathers-socketio/client';
import { CookieStorage } from 'cookie-storage';
import io from 'socket.io-client';
import store from '~store';

const socket = io('http://localhost:3030');
const app = feathers()
  .configure(socketio(socket))
  .configure(hooks())
  .configure(auth({ storage: new CookieStorage() }))
  .configure(feathersVuex(store, {
    idField: '_id',
    auth: {
      userService: '/users',
    },
  }));

app.service('users');

export default app;

Expected behavior

SSR should work and I should get a Vuex store with feathers' services.

Actual behavior

Nuxt fails at rendering the app in the server with this message:

 DONE  Compiled successfully in 737ms                                                                                                12:05:16 PM

> Open http://127.0.0.1:3000

  nuxt:render Rendering url / +36s
/Users/silvestre/Projects/feathers-nuxt/node_modules/vue-meta/lib/vue-meta.js:824
    var htmlTag = document.getElementsByTagName('html')[0];
                  ^

ReferenceError: document is not defined
    at updateClientMetaInfo (/Users/silvestre/Projects/feathers-nuxt/node_modules/vue-meta/lib/vue-meta.js:824:19)
    at Vue$2.refresh (/Users/silvestre/Projects/feathers-nuxt/node_modules/vue-meta/lib/vue-meta.js:885:35)
    at /Users/silvestre/Projects/feathers-nuxt/node_modules/vue-meta/lib/vue-meta.js:1013:74
    at Timeout._onTimeout (/Users/silvestre/Projects/feathers-nuxt/node_modules/vue-meta/lib/vue-meta.js:924:5)
    at ontimeout (timers.js:386:14)
    at tryOnTimeout (timers.js:250:5)
    at Timer.listOnTimeout (timers.js:214:5)
[nodemon] app crashed - waiting for file changes before starting...

System configuration

Module versions:

{
  "dependencies": {
    "body-parser": "^1.17.1",
    "compression": "^1.6.2",
    "cors": "^2.8.3",
    "feathers": "^2.1.1",
    "feathers-authentication": "^1.2.0",
    "feathers-authentication-jwt": "^0.3.1",
    "feathers-authentication-local": "^0.3.4",
    "feathers-configuration": "^0.4.1",
    "feathers-errors": "^2.6.2",
    "feathers-hooks": "^1.8.1",
    "feathers-hooks-common": "^2.0.3",
    "feathers-rest": "^1.7.1",
    "feathers-sequelize": "^1.4.5",
    "feathers-socketio": "^1.5.2",
    "feathers-vuex": "^0.2.2",
    "helmet": "^3.5.0",
    "nuxt": "^0.10.5",
    "pg": "^6.1.5",
    "sequelize": "^3.30.4",
    "serve-favicon": "^2.4.2",
    "socket.io-client": "^1.7.3",
    "winston": "^2.3.1"
  },
  "devDependencies": {
    "eslint": "^3.19.0",
    "eslint-config-airbnb": "^14.1.0",
    "eslint-plugin-html": "^2.0.1",
    "eslint-plugin-import": "^2.2.0",
    "mocha": "^3.2.0",
    "nodemon": "^1.11.0",
    "request": "^2.81.0",
    "request-promise": "^4.2.0"
  }
}

NodeJS version:

$ node -v
v7.9.0

Operating System:

I'm running macOS Sierra 10.12.4

Browser Version:

Google Chrome 57.0.2987.133

Module Loader:

Webpack, provided by Nuxt… so there's no actual webpack config because it's "created dynamically" by Nuxt.

[daffl]

It looks like an error in the vue-meta module. Is there anything that needs to be done to set it up for SSR?

[silvestreh]

@daffl Yeah, I had the same idea of vue-meta being the culprit, I just found it odd that it occurs only when adding feathers-vuex into the mix. Could be related to nuxt/vue-meta#82 😕

[silvestreh]

After investigating a bit further it seems like PR #84 for vue-meta fixes that error message (vue-meta is triggering client-side-specific code in the server). I still get another (probably unrelated) error displayed on Chrome that reads:

Nuxt.js error

TypeError: Converting circular structure to JSON
    at JSON.stringify (<anonymous>)
    at serialize (/Users/silvestre/Projects/feathers-nuxt/node_modules/serialize-javascript/index.js:72:20)
    at _callee2$ (/Users/silvestre/Projects/feathers-nuxt/node_modules/nuxt/dist/nuxt.js:1343:132)
    at tryCatch (/Users/silvestre/Projects/feathers-nuxt/node_modules/regenerator-runtime/runtime.js:64:40)
    at Generator.invoke [as _invoke] (/Users/silvestre/Projects/feathers-nuxt/node_modules/regenerator-runtime/runtime.js:299:22)
    at Generator.prototype.(anonymous function) [as next] (/Users/silvestre/Projects/feathers-nuxt/node_modules/regenerator-runtime/runtime.js:116:21)
    at onFulfilled (/Users/silvestre/Projects/feathers-nuxt/node_modules/co/index.js:65:19)

EDIT: Possibly related to nuxt/nuxt#541

[marshallswain]

I did some offline debugging during my flight today and noticed that vue-meta was definitely running client-side code on the server. I'm glad you found that other issue. It wasn't making any sense. I'm still investigating the circular JSON issue.

[marshallswain]

@silvestreh can you try with version 0.4.0?

You still have to manually apply the fix to vue-meta: nuxt/vue-meta#84

[marshallswain]

I made a PR to fix the vue-meta tests. Hopefully that will help make it easier for the maintainer to merge in the other PR we need.

nuxt/vue-meta#92

[silvestreh]

@marshallswain 0.4.0 works like a charm! 😃 … Regarding the bug in vue-meta@0.5.6, downgrading to 0.5.5 seems to solve the problem.

[marshallswain]

Yeah! I tried it a bit this morning. I noticed that in the fetch method, you don't get access to the mapped actions. fetch probably hooks in before that stuff is applied to the component scope, so you can't access the methods with this.method. It's easy enough to use the namespaces in dispatch, though:

import { mapState, mapGetters, mapActions } from 'vuex'

export default {
  name: 'home',
  computed: {
    ...mapState('auth', {
      authUser: 'user'
    })
  },
  fetch ({ store, params }) {
    return store.dispatch('auth/authenticate')
      .then(response => {
        return store.dispatch('users/find', {})
      })
      .catch(error => {
        console.log(error)
        return error
      })
  }
}

For some reason I'm getting an error that the auth module is not found, though. If you don't see an issue with that, maybe you can share your solution with me. 😉

[tonyrewin]

vue-meta": "0.5.5" in package.json solves one problem, but really why is this issue closed? Can you, please, share some code how to connect feathers services to the next's vuex-store trough the feathers-vuex module. Just axios is fine, but what about socket.io?

UPDATE: I found feathers-nuxt rep by @silvestreh helpful with my case

[silvestreh]

@tonyrewin beware that my feathers-nuxt repo is a work in progress. Server-side auth is broken!