Integrate Stubby CMS with Nuxt.js — A Step-by-Step Guide for Dynamic Content Management

Integrating Stubby CMS with Nuxt.js enables developers to manage content seamlessly while leveraging Nuxt.js's powerful features for building dynamic web applications. Stubby CMS offers a headless content management system with MDX support, allowing for flexible content creation and delivery. This guide provides a step-by-step approach to integrating Stubby CMS with a Nuxt.js application.

Setting Up Stubby CMS

Register and Create a New Site: Begin by registering on Stubby CMS at https://stubby.io/login. After logging in, navigate to your dashboard and click the "Create New Site" button to set up a new site. STUBBY

Organize Content: Within the Stubby CMS interface, add files and folders to organize your content. You can write your MDX content directly, similar to working within your Nuxt.js environment.

Configuring the Nuxt.js Application

Install Nuxt.js: Ensure that Node.js is installed on your system. Create a new Nuxt.js project by running:

npx create-nuxt-app <project-name>

Follow the prompts to set up your project with the desired configurations.

Set Up Axios Module: To facilitate API requests to Stubby CMS, install the Axios module:

Then, add it to your nuxt.config.js file:

export default {
  modules: [
    '@nuxtjs/axios',
  ],
  axios: {
    baseURL: 'https://stubby.io/api/v1', // Stubby CMS API base URL
  },
}

Fetching Content from Stubby CMS

Retrieve All Pages: Create a service to fetch all pages from Stubby CMS. For example, in a file named services/pages.js:

export const getAllPages = async (axios, siteId, apiKey) => {
  const url = `/sites/${siteId}/folders?apiKey=${apiKey}`;
  const { data } = await axios.get(url);
  return data;
};

Fetch a Single Page: To fetch a specific page by its slug:

export const getPage = async (axios, siteId, slug, apiKey) => {
  const url = `/sites/${siteId}/pages/${slug}?apiKey=${apiKey}`;
  const { data } = await axios.get(url);
  return data;
};

Displaying Content in Nuxt.js Pages

Blog List Page: Create a page to list all blog posts. In pages/blog/index.vue:

<template>
  <main class="container pb-40 pt-16">
    <h1>Blog</h1>
    <ul>
      <li v-for="page in pages" :key="page.slug">
        <nuxt-link :to="`/blog/${page.slug}`">{{ page.name }}</nuxt-link>
      </li>
    </ul>
  </main>
</template>

<script>
import { getAllPages } from '~/services/pages';

export default {
  async asyncData({ $axios }) {
    const siteId = 'YOUR_SITE_ID';
    const apiKey = 'YOUR_API_KEY';
    const pages = await getAllPages($axios, siteId, apiKey);
    return { pages };
  },
};
</script>

Individual Blog Post Page: Create a dynamic page to display individual blog posts. In pages/blog/_slug.vue:

<template>
  <div>
    <h1>{{ page.name }}</h1>
    <article v-html="page.content"></article>
  </div>
</template>

<script>
import { getPage } from '~/services/pages';

export default {
  async asyncData({ $axios, params }) {
    const siteId = 'YOUR_SITE_ID';
    const apiKey = 'YOUR_API_KEY';
    const page = await getPage($axios, siteId, params.slug, apiKey);
    return { page };
  },
};
</script>

Enabling Content Revalidation

To ensure your Nuxt.js application serves the most up-to-date content, set up a webhook in Stubby CMS that triggers revalidation whenever new content is published. Configure the webhook URL in the Settings -> Webhook settings of Stubby CMS.

Enhancing SEO and Open Graph Metadata

Utilize the front matter section of your MDX files in Stubby CMS to add SEO and Open Graph metadata. This practice can significantly improve your site's SEO performance and social media visibility.

By following these steps, you can effectively integrate Stubby CMS with your Nuxt.js application, enabling dynamic and easily manageable content delivery. This setup combines the flexibility of a headless CMS with the robust features of Nuxt.js, providing a powerful solution for modern web development.