BuzzRank Nuxt.js Integration

Why Nuxt.js + BuzzRank?

Nuxt.js is a Vue.js framework for building performant, SEO-friendly web applications with SSG (Static Site Generation) and SSR (Server-Side Rendering).

BuzzRank is a content automation platform for scaling programmatic SEO.

Together, they enable Vue developers to build SEO powerhouses at scale.

Integration Options

1. API Integration (Dynamic Content)

Fetch BuzzRank content dynamically via API in Nuxt 3:

// pages/blog/[slug].vue
<script setup>
const route = useRoute();
const { data: content } = await useFetch(`https://api.buzzrank.io/content/${route.params.slug}`, {
  headers: {
    'Authorization': `Bearer ${useRuntimeConfig().BUZZRANK_API_KEY}`
  }
});
</script>

<template>
  <article v-if="content">
    <h1>{{ content.title }}</h1>
    <div v-html="content.body"></div>
  </article>
</template>

Use case: Dynamic content that updates frequently. SSR delivers fresh content on every request.

2. JSON/Markdown Export (Static Content)

Export content from BuzzRank as JSON or Markdown, commit to your repo:

// pages/blog/[slug].vue (Nuxt 2)
export default {
  async asyncData({ params, $content }) {
    const content = await $content('blog', params.slug).fetch();
    return { content };
  }
}

Or with Nuxt 3 + Nuxt Content:

// pages/blog/[slug].vue
<script setup>
const route = useRoute();
const { data: content } = await useAsyncData(() =>
  queryContent('blog').where({ slug: route.params.slug }).findOne()
);
</script>

Use case: Fully static sites with maximum performance. Use nuxt generate to build all pages at deploy time.

3. Headless CMS Integration

BuzzRank publishes to your headless CMS (Contentful, Strapi, Sanity), Nuxt fetches from CMS:

// composables/useCMS.js
export const useContent = async (slug) => {
  const { data } = await useFetch(`https://cms.example.com/api/posts/${slug}`);
  return data;
}

Use case: Teams that already use a headless CMS. BuzzRank automates content creation, CMS handles storage and delivery.

Programmatic SEO with Nuxt

Nuxt is perfect for programmatic SEO with dynamic routes:

Nuxt 2:

// nuxt.config.js
export default {
  generate: {
    async routes() {
      const cities = await fetch('https://api.buzzrank.io/cities').then(r => r.json());
      return cities.map(city => `/location/${city.slug}`);
    }
  }
}

Nuxt 3:

// server/routes/sitemap.xml.ts
export default defineEventHandler(async () => {
  const cities = await $fetch('https://api.buzzrank.io/cities');
  const routes = cities.map(city => `/location/${city.slug}`);
  
  return generateSitemap(routes);
});

BuzzRank generates unique content for each city. Nuxt builds 1000 pages at deploy time with nuxt generate.

SEO Optimization

Nuxt provides built-in SEO features that work seamlessly with BuzzRank:

useSeoMeta (Nuxt 3):

<script setup>
const { data: content } = await useFetch(`/api/content/${route.params.slug}`);

useSeoMeta({
  title: content.value.metaTitle,
  description: content.value.metaDescription,
  ogTitle: content.value.metaTitle,
  ogDescription: content.value.metaDescription,
  ogImage: content.value.image
});
</script>

BuzzRank generates optimized meta data, Nuxt renders it perfectly for search engines.

Deployment Workflow

1. Generate content in BuzzRank (bulk or individual)
2. Export as JSON/Markdown or push via API
3. Commit to Git (if static) or trigger CMS webhook
4. Deploy to Vercel/Netlify with nuxt generate
5. Optional: Use Nuxt ISR (Incremental Static Regeneration) for fresh content

Performance Benefits

• Static pages: Pre-rendered at build time = instant loading
• Code splitting: Nuxt automatically splits code for faster loads
• Image optimization: Nuxt Image module optimizes images automatically
• Edge caching: Vercel Edge Network serves content globally

Result: BuzzRank-generated content loads in <1 second, ranks higher, converts better.

Nuxt Content Module Integration

For markdown-based workflows, use Nuxt Content:

npm install @nuxt/content

// nuxt.config.js
export default {
  modules: ['@nuxt/content'],
  content: {
    dir: 'content' // BuzzRank exports markdown here
  }
}

// pages/blog/[slug].vue
<template>
  <ContentDoc :path="`/blog/${$route.params.slug}`" />
</template>

BuzzRank exports markdown → Nuxt Content renders it → Perfect for editorial sites.

Case Study: Vue-based SaaS Marketing Site

• Framework: Nuxt 3 + BuzzRank API
• Content: 400 programmatically generated pages (features, use cases, integrations)
• Build time: 2 minutes with SSG
• Performance: 98/100 PageSpeed score
• Traffic: 8k organic visitors/month in 3 months

Try BuzzRank with Nuxt.js →