Skip to main content
FarmFarm
Version: 2.x (Latest)
On this page

Migrate From Vite

Farm supports many Vite-style project conventions, but it is not a drop-in replacement for every Vite internal API. Treat migration as a config and plugin compatibility pass.

1. Rename the config file

Rename vite.config.ts to farm.config.ts and import Farm's helper:

ts
import { defineConfig } from '@farmfe/core';

export default defineConfig({
  // Farm config
});

Refer to Configuring Farm for current Farm config fields.

2. Move Vite plugins to vitePlugins

Farm's native plugins use plugins. Vite-compatible plugins belong in vitePlugins:

ts
import { defineConfig } from '@farmfe/core';
import vue from '@vitejs/plugin-vue';
import sass from '@farmfe/plugin-sass';

export default defineConfig({
  vitePlugins: [vue()],
  plugins: [sass()]
});

Some Vite plugins depend on Vite internals and may not work in Farm. When a plugin is tightly coupled to Vite, prefer a Farm official plugin, a PostCSS plugin, or a framework-specific integration instead.

3. Remove Vite-only options

Many Vite optimization options are not needed in Farm. Start by removing Vite-only fields such as optimizeDeps, then add Farm equivalents only when needed.

Common replacements:

Vite patternFarm guidance
plugins for Vite pluginsMove to vitePlugins.
Asset/base pathUse Farm compilation.output.publicPath or CLI --base.
Dev server settingsUse Farm server.
SSR-specific Vite configReview Farm SSR.

4. Verify the migration

Run both dev and production builds:

bash
npx farm dev
npx farm build

If a Vite plugin fails during migration, temporarily remove it and re-add integrations one by one so you can distinguish config issues from plugin compatibility issues.

We have migrated a real Vite admin project to Farm; use it as a reference for practical migration patterns.

100%

Drag or pinch to explore. Keyboard: + / − zoom, arrows pan, 0 resets, Esc closes.