Home

<template>
  <div>
    <h1>Todos - {{ todo.id }}</h1>
    <p>This was rendered by the {{ renderer }}</p>
    <br /><nuxt-link to="/">Home</nuxt-link>
    <br /><nuxt-link to="/todos">Todos</nuxt-link>
  </div>
</template>

<script>
const feathers = require('feathers/client');
const socketio = require('feathers-socketio/client');
const io = require('socket.io-client');

const socket = io('');
const app = feathers();

// Set up Socket.io client with the socket
app.configure(socketio(socket));

export default {
  async asyncData ({ req, params }) {
    const todo = await app.service('api/v1/todos').get(params.id);
    return {
      renderer: req ? 'server' : 'client',
      todo: todo,
    }
  }
}
</script>

The Feathers + Nuxt + VueJS tutorial covered adding rendering, but not full isomorphic integration for anything not static.

This file:

• ✅ correctly acquires the :id Todo object from websockets when navigated to (clientside render)
• ❌ is not able to acquire :id Todo object from websockets on fresh arrival (serverside render) (it times out, mostly)
• ❌ the socketio connection gets initiated multiple times. I haven’t been able to find any reference material for having it happen once, either globally on start on globally on first demand.

I think this would be solved for me if app from app.service('api/v1/todos') was client/server agnostically defined somewhere else, but I can’t find any reference material for this. All the documentation I’ve seen so far assumes that you’ll be using axios, which I assume makes an internal api request?

Any ideas?