Migrate from NuxtCopy Anchor Link

Nuxt and Farm share Vue, file-based routing, server rendering, API routes, Vite, and Nitro deployment output. Farm uses a different application and server contract, but the @farm.js/vue renderer lets route UI remain in Vue Single-File Components. Preserve route URLs and server contracts while replacing Nuxt-specific macros, composables, modules, and runtime behavior.

Using a coding agent?

Point it at /docs/migrations/nuxt.md. That version maps every Nuxt feature to its Farm equivalent and ends with a verification checklist.

Create the Farm shellCopy Anchor Link

Add Farm and the Vue renderer without removing Nuxt first:

pnpm add @farm.js/core @farm.js/vue vue
pnpm add -D @farm.js/cli

Create the smallest Farm config:

import { defineConfig } from "@farm.js/core";
import { vue } from "@farm.js/vue";

export default defineConfig({
  renderer: vue(),
});

Point the application scripts at Farm when the first route is ready to run:

{
  "scripts": {
    "dev": "farm dev",
    "build": "farm build",
    "start": "node .farm/.output/server/index.mjs"
  }
}

Map pages and layoutsCopy Anchor Link

Nuxt 4 normally keeps pages under app/pages; projects using the earlier layout may use pages at the root. Both map into Farm's src/app.

Create a root layout before moving pages:

<script setup lang="ts">
defineOptions({ inheritAttrs: false });
</script>

<template>
  <slot />
</template>

Keep ordinary templates, <script setup>, refs, computed values, and scoped styles. Replace Nuxt auto-imports and macros with explicit Vue imports and Farm route exports. Use a normal <script lang="ts"> block for named exports such as metadata and hydrate, and add defineOptions({ inheritAttrs: false }) so route props do not fall through to the root DOM element.

See Vue Renderer for the complete SFC conventions.

Replace Nuxt navigationCopy Anchor Link

Keep dynamic segment names stable so existing links and external URLs continue to work.

Move data fetchingCopy Anchor Link

Classify every useFetch, useAsyncData, and $fetch call by where it should run:

Keep database clients, secrets, and privileged provider SDKs in server-only modules. Validate untrusted params, query values, form data, and API bodies before using them.

Convert server routesCopy Anchor Link

Move Nitro server handlers into Farm API route modules:

Farm handlers use Web Request and Response objects:

export async function GET() {
  return Response.json({ ok: true });
}

Use createEndpoint when the endpoint needs schema validation and a typed generated client.

Move middleware and pluginsCopy Anchor Link

Nuxt route middleware and server middleware do not share one lifecycle, so migrate them by responsibility:

• move authentication redirects and route gates into src/app/**/middleware.ts
• move global request behavior into farm.config.ts middleware
• move reusable server lifecycle behavior into a Farm plugin
• move provider setup into a Farm integration when it owns routes, middleware, or client context
• replace Nuxt client plugins with Vue components or Farm client plugin hooks

Repeat sensitive authorization in API routes and server functions. A page redirect is not an authorization boundary.

Move runtime configurationCopy Anchor Link

Review nuxt.config.ts, app.config.ts, modules, auto-imports, aliases, and runtimeConfig explicitly:

Do not expose a private Nuxt runtime value through Farm's public environment configuration.

Verify and remove NuxtCopy Anchor Link

Run both applications during the transition and compare:

• static, dynamic, optional, and catch-all routes
• layouts, metadata, error states, and redirects
• server-rendered data and client navigation
• API status codes, headers, cookies, and response bodies
• middleware order and authorization
• image and public asset URLs
• production output on the target deployment platform

After the Farm application passes those checks, remove Nuxt, Nuxt modules, .nuxt, and Nuxt-specific deployment configuration. Keep Vue and @farm.js/vue as application dependencies.

For source behavior, refer to Nuxt's official pages, data fetching, and directory structure documentation while auditing the original app.