Use Visual Editor with Nuxt 3

Learn how to use Visual Editor with a Nuxt 3-based website.

Configure Visual Editor for a Nuxt 3 project

Nuxt 3 is supported through the ssgName: custom option (learn more.

Follow the example repository for a concrete example. Here’s an excerpt from Visual Editor configuration file:

// stackbit.config.js
export default {
  stackbitVersion: "~0.6.0",
  cmsName: "contentful",
  nodeVersion: "16",
  ssgName: "custom",
  devCommand: "npm run dev -- -p {PORT}",
  experimental: {
    ssg: {
      name: "Nuxt3",
      logPatterns: { up: ["Local:    http"] },
      passthrough: ["/vite-hmr/**"]
    }
  }
};

Like SvelteKit, Nuxt 3 uses Vite 3.x under the hood. Thus, similar experimental attributes are used to ensure compatibility with Visual Editor. Please see the SvelteKit guide for more.

Access file-based content

The example repository does not use a headless CMS. Rather, it loads page content from local files in the same repository. By default, Nuxt does not include all files in the repository in either its client-side bundle or server-side functions.

Thus, in the example, we configure Nitro to bundle content files as server assets and then use the storage API to access them. See the file utils/content.js in the example.

Content reload

Here is how content reload is implemented in the example:

1. The client-side Nuxt plugin plugins/stackbit-listener.client.ts adds a listener to the window event stackbitObjectsChanged. This event is fired by Visual Editor on any content change, both when working locally and with Visual Editor projects.
2. The plugin uses an emitter to notify whoever is listening on that emitter.
3. The catch-all page route pages/[...slug].vue(GitHub captures this event and runs the refresh callback returned from its initial call to useAsyncData() (see Nuxt 3 guide to refresh data).

Learn more about listening to content change events.

Example

Nuxt 3 Example