NuxtJS Integration Guide

Simple guide to add JustCMS content management to your Nuxt project

Installation & Setup

Setting up JustCMS with your Nuxt project is straightforward and only requires a few simple steps. Let's walk through the process:

Add the Composable

Copy useJustCMS.ts file into your project's composables directory

Configure API Credentials

Add your JustCMS token and project ID to nuxt.config.ts

Download Composable from Github

First, make sure your project is ready:

You should have a working NuxtJS project
TypeScript should be set up in your project

Adding the Composable

The first step is to add the JustCMS composable to your project:

Create a composables directory in your project if it doesn't exist
Copy the useJustCMS.ts file into this directory

Configuring API Credentials

Next, you'll need to add your JustCMS credentials to your Nuxt configuration. Open your nuxt.config.ts file and add the following:

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      justCmsToken: 'YOUR_JUSTCMS_API_TOKEN',
      justCmsProject: 'YOUR_JUSTCMS_PROJECT_ID'
    }
  }
})

Replace the placeholder values with your actual credentials:

justCmsToken: Your JustCMS API token for authentication
justCmsProject: Your JustCMS project ID

That's It!

With these simple steps completed, you're ready to start using JustCMS in your Nuxt project. The composable is now available throughout your application, and you can begin fetching your content right away.

Basic Usage of JustCMS in Nuxt Components

Using JustCMS in your Nuxt components is straightforward. The composable provides simple methods to fetch categories, pages, and menus. Let's look at some common usage examples.

Fetching Categories

To display categories in your component, import the composable and use the getCategories() method:

<template>
  <div>
    <h2>Categories</h2>
    <ul>
      <li v-for="cat in categories" :key="cat.slug">
        {{ cat.name }}
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { useJustCMS } from '~/composables/useJustCMS'

const { getCategories } = useJustCMS()
const categories = await getCategories()
</script>

Working with Pages

The composable offers flexible options for fetching pages. You can get all pages, filter by category, or use pagination:

<template>
  <div>
    <h2>Blog Posts</h2>
    <div v-for="page in pages.pages" :key="page.slug">
      <h3>{{ page.title }}</h3>
      <p>{{ page.description }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useJustCMS } from '~/composables/useJustCMS'

const { getPages } = useJustCMS()
const pages = await getPages({ 
  category: 'blog',
  page: 1,
  perPage: 10 
})
</script>

Displaying Single Pages

To fetch and display a single page by its slug, use the getPageBySlug() method:

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

<script setup lang="ts">
import { useJustCMS } from '~/composables/useJustCMS'

const { getPageBySlug } = useJustCMS()
const page = await getPageBySlug('about-us')
</script>

Working with Menus

To fetch and display a menu by its ID, use the getMenuById() method:

<template>
  <nav v-if="menu">
    <ul>
      <li v-for="item in menu.items" :key="item.id">
        <NuxtLink :to="item.url">{{ item.label }}</NuxtLink>
      </li>
    </ul>
  </nav>
</template>

<script setup lang="ts">
import { useJustCMS } from '~/composables/useJustCMS'

const { getMenuById } = useJustCMS()
const menu = await getMenuById('main-menu')
</script>

Server-Side Rendering

All data is fetched on the server before page load, improving SEO and performance

Type Safety

Full TypeScript support ensures your code is reliable and maintainable

Simple API

Clean and intuitive methods make content fetching straightforward

Flexible Options

Support for filtering, pagination, and different content types

These examples demonstrate how easy it is to integrate JustCMS content into your Nuxt components. The composable handles all the API communication, letting you focus on building your user interface.

Available Functions in JustCMS Composable

The JustCMS composable provides four main functions to fetch different types of content from your project. Let's explore each function and how to use them effectively.

getCategories()

The simplest function that retrieves all categories from your JustCMS project. It requires no parameters and returns an array of categories.

const { getCategories } = useJustCMS()
const categories = await getCategories()
// Returns: Category[]

getPages()

A versatile function that allows you to fetch pages with various options for filtering and pagination.

Optional Parameters

category, page, perPage

Returns

Object with pages array, total count, current page, and total pages

// Get all pages
const allPages = await getPages()

// Get pages from specific category
const categoryPages = await getPages({ category: 'blog' })

// Get paginated results
const paginatedPages = await getPages({ page: 1, perPage: 10 })

getPageBySlug()

Use this function when you need to fetch a single page by its unique slug. Perfect for individual page views or detailed content displays.

const page = await getPageBySlug('about-us')
// Returns: Page | null

getMenuById()

Retrieve a complete menu structure including all its items. This is commonly used for navigation menus or site structure.

const menu = await getMenuById('main-menu')
// Returns: Menu | null

Server-Side Ready

All functions work seamlessly with Nuxt's SSR capabilities

Type Safe

Full TypeScript support for all function returns

Null Safety

Functions return null when content isn't found

These functions provide everything you need to fetch and display content from your JustCMS project. They're designed to be simple to use while giving you full flexibility in how you structure your content.

Utility Functions in JustCMS

JustCMS provides several utility functions that make it easier to work with your content. These helper functions handle common tasks when working with content blocks, images, and categories.

Working with Content Blocks

The isBlockHasStyle() function helps you check if a content block has a specific style applied to it:

const isHighlighted = isBlockHasStyle(block, 'highlight')
// Returns: boolean

This function performs a case-insensitive check, making it more flexible and easier to use in your components.

Image Handling Functions

getLargeImageVariant()

Retrieves the large variant of an image (second variant in the array)

getFirstImage()

Gets the first image from an image block

// Get large image variant
const largeImage = getLargeImageVariant(page.coverImage)

// Get first image from block
const firstImage = getFirstImage(imageBlock)

Category Management

To check if a page belongs to a specific category, use the hasCategory() function:

const isBlogPost = hasCategory(page, 'blog')
// Returns: boolean

These utility functions are designed to simplify common tasks and make your code more readable and maintainable. They handle edge cases and provide a consistent interface for working with JustCMS content.

Type-Safe

All utility functions are fully typed for TypeScript support

Easy to Use

Simple function calls with clear parameters

Consistent

Standardized approach to common content operations