Netlify Docs
Ask Netlify

Contact

Netlify Create /Frameworks /

Use Netlify Create with Nuxt 3

Learn how to use Netlify Create with a Nuxt 3-based website.

# Configure Netlify Create 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 the Netlify Create 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 Netlify Create. 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 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 refresh 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:

# netlify.toml
[build]
  command = "npm run build"
  publish = "dist"

# Example

Nuxt 3 Example