Nuxt

Utilisez Firecrawl avec Nuxt pour extraire, faire des recherches et interagir avec les données du Web dans votre application Vue.

Prérequis

Un projet Nuxt 3+
Une clé API Firecrawl — en obtenir une gratuitement

Installer le SDK

npm install firecrawl

Ajoutez votre clé API à .env :

FIRECRAWL_API_KEY=fc-YOUR-API-KEY

Recherche sur le Web

Créez server/api/search.post.ts :

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;
});

Utilisez-la dans un composant Vue :

<script setup>
const query = ref("");
const { data, execute } = useFetch("/api/search", {
  method: "POST",
  body: { query },
  immediate: false,
});
</script>

<template>
  <div>
    <input v-model="query" placeholder="Search the web..." />
    <button @click="execute()">Search</button>
    <ul v-if="data?.web">
      <li v-for="result in data.web" :key="result.url">
        <a :href="result.url">{{ result.title }}</a>
      </li>
    </ul>
  </div>
</template>

Scraper une page

Créez server/api/scrape.post.ts:

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;
});

Appelez-la depuis un composant Vue :

<script setup>
const url = ref("https://example.com");
const { data, execute } = useFetch("/api/scrape", {
  method: "POST",
  body: { url },
  immediate: false,
});
</script>

<template>
  <div>
    <input v-model="url" placeholder="Enter URL" />
    <button @click="execute()">Scrape</button>
    <pre v-if="data">{{ data.markdown }}</pre>
  </div>
</template>

Interact avec une page

Créez server/api/interact.post.ts :

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 };
});

Prochaines étapes

Documentation Scrape

Toutes les options de scrape, y compris les formats, les actions et les proxys

Documentation recherche

Faites des recherches sur le web et obtenez le contenu complet de la page

Documentation Interact

Cliquez, remplissez des formulaires et extrayez du contenu dynamique

Référence du SDK Node

Référence complète du SDK avec crawl, cartographie, extraction par lot et plus encore