Integration with Nuxt

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.

[marshallswain]

@silvestreh can you try with version 0.4.0?

You still have to manually apply the fix to vue-meta: https://github.com/declandewet/vue-meta/pull/84

[silvestreh]

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