Server Side Rendering (Nuxt.js)

Setting up Server Side Rendering (SSR) with Nuxt.js using the @quirks/nuxt module.

To use nuxt, we've created a package that defines a nuxt module so that all the hooks and utilities are imported automatically.

Install quirks nuxt package:

npm install @quirks/nuxt

If you are using version v1 of yarn you must manually install the peer dependencies, as this version of yarn does not automatically resolve them.

Add Quirks module inside nuxt.config.ts:

nuxt.config.ts

export default defineNuxtConfig({
  modules: ["@quirks/nuxt"],
});

Add quirks.ts inside plugins folder:

/plugins/quirks.ts

import {
  chain as osmosis,
  assets as osmosisAssetList,
} from 'chain-registry/mainnet/osmosis';
import type { Config } from "@quirks/store";
import { keplrExtension, leapExtension } from "@quirks/wallets";
import { generateConfig, initialStateWithCookie } from "@quirks/ssr"
 
const config = generateConfig({
  wallets: [keplrExtension, leapExtension],
  chains: [osmosis],
  assetsLists: [osmosisAssetList],
});
 
export default defineNuxtPlugin((nuxtApp) => {
  const cookie = useCookie('quirks');
 
  const configWithCookie = initialStateWithCookie(config, JSON.stringify(cookie.value))
 
  nuxtApp.vueApp.use(quirksPlugin, configWithCookie);
});

You can start using it as described inside quick start.