<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:
:id
Todo object from websockets when navigated to (clientside render):id
Todo object from websockets on fresh arrival (serverside render) (it times out, mostly)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>