Static GitHub Issues

[680] Isomorphic examples with data without axios?

prev: Help wanted about cookies-js
next: Idea/Suggestion: Nuxt CLI command for generating pages/components
<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:

  • :white_check_mark: correctly acquires the :id Todo object from websockets when navigated to (clientside render)
  • :x: is not able to acquire :id Todo object from websockets on fresh arrival (serverside render) (it times out, mostly)
  • :x: 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?

<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c588">#c588</a>)</em></sub></div>