Nuxt 3 (Early Preview)

How to integrate Netlify Create in a Nuxt 3 based Website

Nuxt 3 is still in Release Candidate status at the time of writing.

When upgrading to a newer version of Nuxt 3, some code changes may be necessary.

How to use

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

Follow the example repository for a concrete example. Here's an excerpt from the Netlify Create configuration file:

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
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 Netlify Create. Please see the SvelteKit guide for more.

Accessing file-based content

The example repository does not use a headless CMS. Rather, it loads page contet 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 the Netlify Create visual editor on any content change, both when working locally and with Netlify Create 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 refreshing data).

Learn more about listening to content change events.

Managed hosting

If you're using Managed Hosting you also need to include a Netlify configuration file netlify.toml in your repository. Its contents should look like the following:

  • 1
  • 2
  • 3
[build]
  command = "npm run build"
  publish = "dist"

Example

Nuxt 3 Example (Early Preview)