Nuxt example

import HeadingApiLink from '@site/src/components/Docs/HeadingApiLink';

In this guide, you'll learn how to integrate Nuxt v3, a Vue framework, into moon.

Begin by creating a new Nuxt project at a specified folder path (this should not be created in the workspace root, unless a polyrepo).

cd apps && npx nuxi init <project>

View the official Nuxt docs for a more in-depth guide to getting started!

Setup

Since Nuxt is per-project, the associated moon tasks should be defined in each project's moon.* file.

fileGroups:
  nuxt:
    - 'assets/**/*'
    - 'components/**/*'
    - 'composables/**/*'
    - 'content/**/*'
    - 'layouts/**/*'
    - 'middleware/**/*'
    - 'pages/**/*'
    - 'plugins/**/*'
    - 'public/**/*'
    - 'server/**/*'
    - 'utils/**/*'
    - '.nuxtignore'
    - 'app.config.*'
    - 'app.vue'
    - 'nuxt.config.*'

tasks:
  nuxt:
    command: 'nuxt'
    preset: 'server'

  # Production build
  build:
    command: 'nuxt build'
    inputs:
      - '@group(nuxt)'
    outputs:
      - '.nuxt'
      - '.output'

  # Development server
  dev:
    command: 'nuxt dev'
    preset: 'server'

  # Preview production build locally
  preview:
    command: 'nuxt preview'
    deps:
      - '~:build'
    preset: 'server'

Be sure to keep the postinstall script in your project's package.json.

{
  // ...
  "scripts": {
    "postinstall": "nuxt prepare"
  }
}

ESLint integration

Refer to our Vue documentation for more information on linting.

TypeScript integration

Nuxt requires vue-tsc for typechecking, so refer to our Vue documentation for more information.

Configuration

Root-level

We suggest against root-level configuration, as Nuxt should be installed per-project, and the nuxt command expects the configuration to live relative to the project root.

Project-level

When creating a new Nuxt project, a nuxt.config.ts is created, and must exist in the project root. This allows each project to configure Next.js for their needs.

export default defineNuxtConfig({});

Testing

Nuxt supports testing through Jest or Vitest. Refer to our Jest documentation or Vitest documentation for more information on testing.