# Nuxt (/zh/quickstarts/nuxt)
Related: [Node.js](/zh/quickstarts/nodejs.md), [Next.js](/zh/quickstarts/nextjs.md), [Express](/zh/quickstarts/express.md), [NestJS](/zh/quickstarts/nestjs.md), [Fastify](/zh/quickstarts/fastify.md), [Hono](/zh/quickstarts/hono.md)
## 前提条件 [#前提条件]
* Nuxt 3+ 项目
* 一个 Firecrawl API 密钥 — [免费获取](https://www.firecrawl.dev/app/api-keys)
## 安装 SDK [#安装-sdk]
```bash
npm install firecrawl
```
将 API 密钥添加到 `.env` 中：
```bash
FIRECRAWL_API_KEY=fc-YOUR-API-KEY
```
## 进行网页搜索 [#进行网页搜索]
创建 `server/api/search.post.ts`：
```typescript
import { Firecrawl } from "firecrawl";
const firecrawl = new Firecrawl({
apiKey: process.env.FIRECRAWL_API_KEY,
});
export default defineEventHandler(async (event) => {
const { query } = await readBody(event);
const results = await firecrawl.search(query, { limit: 5 });
return results;
});
```
在 Vue 组件中这样调用：
```vue
```
## 抓取页面 [#抓取页面]
创建 `server/api/scrape.post.ts`：
```typescript
import { Firecrawl } from "firecrawl";
const firecrawl = new Firecrawl({
apiKey: process.env.FIRECRAWL_API_KEY,
});
export default defineEventHandler(async (event) => {
const { url } = await readBody(event);
const result = await firecrawl.scrape(url);
return result;
});
```
在 Vue 组件中调用：
```vue
```
## 与页面交互 [#与页面交互]
创建 `server/api/interact.post.ts`：
```typescript
import { Firecrawl } from "firecrawl";
const firecrawl = new Firecrawl({
apiKey: process.env.FIRECRAWL_API_KEY,
});
export default defineEventHandler(async (event) => {
const result = await firecrawl.scrape("https://www.amazon.com", {
formats: ["markdown"],
});
const scrapeId = result.metadata?.scrapeId;
await firecrawl.interact(scrapeId, {
prompt: "Search for iPhone 16 Pro Max",
});
const response = await firecrawl.interact(scrapeId, {
prompt: "Click on the first result and tell me the price",
});
await firecrawl.stopInteraction(scrapeId);
return { output: response.output };
});
```
## 后续步骤 [#后续步骤]
涵盖所有抓取选项，包括 formats、actions 和代理
进行网页搜索并获取完整页面内容
点击、填写表单并提取动态内容
完整的 SDK 参考，涵盖爬取、map、batch scrape 等功能