Deploying Nuxt applications to Vercel

Configure your Nuxt application appropriately for Vercel deployment

In your application's nuxt.config.ts file, ensure that the nitro property is configured to use the vercel preset, and that the output.dir property is set to the appropriate directory. The directory that Vercel expects to find the application's build output (as explained in the Vercel documentation) in is .vercel/output at the root of the repository/workspace. So, if your application is located at apps/my-app then the output.dir property should be set to ../../.vercel/output.

For example, if your Nx workspace is structured like this:

├── apps
│   └── my-app
│       ├── nuxt.config.ts
│       ├── src
│       ├── tsconfig.app.json
│       ├── tsconfig.json
│       ├── tsconfig.spec.json
├── nx.json
├── package-lock.json
├── package.json
└── tsconfig.base.json

Then your nitro configuration should look like this:

apps/my-app/nuxt.config.ts
  nitro: {
    preset: 'vercel',
    output:{
      dir: '../../.vercel/output'
    }
  },

For Vercel deployment, it does not really matter what the buildDir property in your nuxt.config.ts is set to.

So, your entire nuxt.config.ts file may look something like this:

apps/my-app/nuxt.config.ts
import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
import { defineNuxtConfig } from 'nuxt/config';

export default defineNuxtConfig({
  workspaceDir: '../../',
  srcDir: 'src',
  devtools: { enabled: true },
  buildDir: '../../dist/apps/my-app/.nuxt',
  devServer: {
    host: 'localhost',
    port: 4200,
  },
  typescript: {
    typeCheck: true,
    tsConfig: {
      extends: './tsconfig.app.json',
    },
  },
  imports: {
    autoImport: false,
  },
  css: ['~/assets/css/styles.css'],
  vite: {
    plugins: [nxViteTsPaths()],
  },
  nitro: {
    preset: 'vercel',
    output: {
      dir: '../../.vercel/output',
    },
  },
});

Configure your Vercel project's settings appropriately

New Vercel project

If you are "importing" your Nx workspace's repository for the first time, make sure you do not choose a root directory as part of the repo selection process (therefore leaving it to be the root of the full repo/workspace)
Ensure the Nuxt.js "Framework Preset" is selected
Expand the "Build & Development Settings" and toggle the override switch for the build command. For example, for an application named my-app the value will look like this:

❯

npx nx build my-app --prod

New Vercel Project

Existing Vercel project

If you have an existing project on Vercel then the exact same guidance applies as for the section above, it's just that you will need to update the project's existing settings.

When everything is updated appropriately, for our my-app example we would see the following in our "General" settings UI:

Existing Vercel Project

Skipping build if the application is not affected

One of the core features of Nx is to run code quality checks and builds only for projects that are affected by recent code changes. We can use Vercel's ignored build step feature to only build our application if it is affected.

To build only what's affected, use the npx nx-ignore <app-name> command under Project Settings > Git on Vercel.

Ignore build step

The nx-ignore command uses Nx to detect whether the current commit affects the specified app, and will skip the build if it is not affected.

Next steps

Naturally, you can continue on and set any additional Environment Variables etc that may be appropriate for your projects, but we have now covered the key points needed to deploy Nuxt.js projects from Nx workspaces on Vercel!