Vue

Use the Vue package for the provider and effects. Choose the helper for the router already installed in your app.

Common setup

Install @ssgoi/vue and keep one Ssgoi provider above RouterView or NuxtPage. It receives the shared route configuration.

import { Ssgoi } from "@ssgoi/vue";
import { drill } from "@ssgoi/vue/view-transitions";

Vue Router

Experimental API

Use the helper with Vue Router 4 inside the common Vue provider.

Agent guide

Wrap the routed region

The boundary follows the committed router path and replaces its DOM root when the route key changes.

<script setup lang="ts">
import { RouterView } from "vue-router";
import { SsgoiRouteBoundary } from "@ssgoi/vue/vue-router";
</script>

<template>
  <SsgoiRouteBoundary><RouterView /></SsgoiRouteBoundary>
</template>

Persistent shells

Use routeKey for the outer shell and a changing inner boundary for the page. resolve receives { pathname } and returns { id, key? }.

Nuxt

Experimental API

Use the Nuxt-specific entry inside the common Vue provider. It observes the committed router state rather than Nuxt’s delayed useRoute value.

Agent guide Runnable template

Wrap NuxtPage

Keep the provider above the layout and page. Do not add a provider for every page.

<script setup lang="ts">
import { SsgoiRouteBoundary } from "@ssgoi/vue/nuxt";
</script>

<template>
  <SsgoiRouteBoundary><NuxtPage /></SsgoiRouteBoundary>
</template>

Beyond the basics

For a persistent /products shell, return the full pathname as id and /products as key from the root boundary's resolve, then put a second default pathname boundary only around the nested <NuxtPage />. The stable outer key preserves header/tabs; the inner boundary produces child transitions.

The helpers connect your router to the common implementation. Route boundaries explains how to connect another router directly. Transitions and route rules apply across the web frameworks.