Skip to main content

Nuxt

version: v0.9.0+
What you'll learn
  • Preparing and configuring Foscia for server-side rendering (SSR)

Server-side rendering​

Foscia can easily integrate within a Nuxt project, but will require additional configuration to support server-side rendering (SSR) for two reasons:

  • Foscia HTTP actions are based on browser fetch API, and don't automatically switch between fetch implementations for Node or browser.
  • Nuxt passes payloads from server to client, such as state from useAsyncData or useState, and Foscia instances are not serializable without a payload plugin.

Setup​

fetch implementation in action factory​

First, you will need a fetch implementation which works in both Node and browser environments.

Nuxt comes with ofetch library for this purpose, which you can install if it is not already a dependency of your project.

npm install ofetch

Once ofetch is installed, you can configure it on your action factory adapter. Here is an exemple with makeJsonRestAdapter, but the configuration is the same with other HTTP based adapters.

import { makeActionFactory } from '@foscia/core';
import { makeJsonRestAdapter } from '@foscia/rest';
import { ofetch } from 'ofetch';

export default makeActionFactory({
  // ...
  ...makeJsonRestAdapter({
    fetch: ofetch.native,
  }),
});
warning

Don't forget the .native property when binding the fetch implementation inside the configuration object, because Foscia requires the native fetch API.

Publishing payload plugin​

Finally, you will need to define a custom payload plugin, which will reduce and revive Foscia models' instances when passing payloads from server to client. To quickly set up this, Foscia CLI provides foscia nuxt:payload-plugin command which will create reducer and reviver (if they are missing) and will publish a fosciaPayloadPlugin.ts file into plugins directory.

npx foscia integrate nuxt payload-plugin
warning

Be aware that this plugin must be registered before any payload reduce/revive tasks. If you need to priorise it, check out the registration order guide on Nuxt docs.

Usage​

You can now use Foscia in any server/client context using useAsyncData.

pages/products.vue
<script setup lang="ts">
import { all, query } from '@foscia/core';
import action from '../data/action';
import Post from '../data/models/post';

const { data: posts } = useAsyncData(
  'posts',
  () => action()
    .use(query(Post))
    .run(all()),
);
</script>

<template>
  <div v-for="post in (posts ?? [])" :key="`posts-${post.id}`">
    {{ post.title }}
  </div>
</template>