Here are a few common examples of using the Ghost Content API in a Nuxt.js web application.

The flexibility of the Ghost Content API allows you to feed posts, pages and any other pieces of content from any Ghost site into a Nuxt.js JavaScript app.

Below are a few examples of how content from Ghost can be passed into a Nuxt.js project. If you just landed here, see the Nuxt.js page for more context!

Getting pages

Pages can be generated in the same fashion as posts, and can even use the same dynamic route file.

export async function getPages() {
  return await api.pages
    .browse({
      limit: "all"
    })
    .catch(err => {
      console.error(err);
    });
}

Adding post attribute data

Using the include option within the Ghost Content API means that attribute data, such as tags and authors, will be included in the post object data:

export async function getPosts() {
  return await api.posts
    .browse({
      include: "tags,authors",
      limit: "all"
    })
    .catch(err => {
      console.error(err);
    });
}

Rendering author pages

An author can be requested using the authors.read() endpoint.

export async function getAuthor(authorSlug) {
  return await api.authors
    .read({
      slug: authorSlug
    })
    .catch(err => {
      console.error(err);
    });
}

A custom author template file can be created at pages/authors/_slug.vue, which will also prevent author URLs colliding with post and page URLs:

<template>
  <div>
    <h1>{{ author.title }}</h1>
    <p>{{ author.bio }}</p>
  </div>
</template>

<script>
  import { getAuthor } from '../api/authors';

  export default {
    async asyncData ({ params }) {
      const author = await getAuthor(params.query.slug);
      return { author: author }
    }
  }
</script>

Formatting post dates

The published date of a post, post.published_at, is returned as a date timestamp. Modern JavaScript methods can convert this date into a selection of humanly readable formats. To output the published date as "Aug 28, 1963":

const posts = await getPosts();

posts.map(post => {
  const options = {
    year: 'numeric',
    month: 'short',
    day: 'numeric'
  };

  post.dateFormatted = new Intl.DateTimeFormat('en-US', options)
    .format(new Date(post.published_at));
});

The date can then be added to the Vue template using {{post.dateFormatted}}.

Redirecting to external URLs

When working with Ghost as a Headless CMS the Handlebars theme layer is superseded by the site consuming the Content API. One way of remedying this is by hiding the front-end using the Private option, located at the bottom of General settings in Ghost admin.

Alternatively redirects.json can be used to redirect all URLs to the external site. Not only does this method prevent the Handlebars site from being indexed, but it also redirects any preview URLs contained within Ghost admin.

The following example redirects all URLs to an external domain and uses regex pattern matching to match all slugs except those used for images within Ghost:

[
  {
    "from": "^\/(?!content/images)(.*)",
    "to": "https://externalsite.com/$1",
    "permanent": true
  }
]

Further reading

Check out the extensive Nuxt.js API documentation and guide. Additionally the Nuxt.js site lists a few examples that can provide a great starting point.