---
title: "Vue"
locale: "en"
version: "1.x"
canonicalUrl: "https://farmfe.org/docs/1.x/frameworks/vue"
publicationStatus: "prerelease"
---

<a id="vue"></a>
# Vue


Create a ` Vue ` project based on ` Farm `.


` Farm ` provides two approaches to support creating ` Vue ` projects:


- Use the ` create-farm ` scaffold to create a scaffold project
- You can manually create a ` Vue ` project following the current documentation


<a id="creating-a-vue-project"></a>
### Creating a Vue Project


**npm**

```sh
npm create farm@latest
```

**pnpm**

```sh
pnpm create farm@latest
```

**yarn**

```sh
yarn create farm@latest
```

**bun**

```sh
bun create farm@latest
```


Select ` Vue ` template in ` Select Framework `



> [!WARNING]
> warning
> 
> Currently, ` Farm ` uses ` Vite ` plugins for both ` vue2 ` and ` vue3 ` and ` vue2.7 ` compilation. Also the development of Rust Vue plugin [fervid](<https://github.com/phoenix-ru/fervid>) is also underway.



```javascript
import { defineConfig } from '@farmfe/core';
import Vue from '@vitejs/plugin-vue'

export default defineConfig({
  vitePlugins: [Vue()],
});
```


<a id="integrating-jsx"></a>
### Integrating jsx


```javascript
import { defineConfig } from '@farmfe/core';
import VueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
  vitePlugins: [VueJsx()],
});
```


If you want to start DevServer


**npm**

```sh
npm dev
```

**pnpm**

```sh
pnpm dev
```

**yarn**

```sh
yarn dev
```

**bun**

```sh
bun dev
```


If you need to run the build production environment product command


**npm**

```sh
npm build
```

**pnpm**

```sh
pnpm build
```

**yarn**

```sh
yarn build
```

**bun**

```sh
bun build
```


If you need to preview your build product


**npm**

```sh
npm preview
```

**pnpm**

```sh
pnpm preview
```

**yarn**

```sh
yarn preview
```

**bun**

```sh
bun preview
```


For more example details: [Vue Example](<https://github.com/farm-fe/farm/tree/main/examples/vite-adapter-vue>)