https://github.com/gomah/nuxt-ghost

Easy Ghost content API integration with Nuxt.js.
https://github.com/gomah/nuxt-ghost

ghost headless headless-cms nuxt nuxt-module nuxtjs

Last synced: 3 months ago
JSON representation

Easy Ghost content API integration with Nuxt.js.

• Host: GitHub
• URL: https://github.com/gomah/nuxt-ghost
• Owner: Gomah
• License: mit
• Created: 2019-12-29T23:53:27.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2022-10-24T21:36:03.000Z (about 2 years ago)
• Last Synced: 2024-10-12T23:03:55.340Z (3 months ago)
• Topics: ghost, headless, headless-cms, nuxt, nuxt-module, nuxtjs
• Language: Vue
• Homepage: https://nuxt-ghost.vercel.app
• Size: 1.96 MB
• Stars: 31
• Watchers: 4
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![nuxt-ghost](https://nuxt-ghost.vercel.app/preview.png)](https://nuxt-ghost.vercel.app)

# 👻 Ghost Module

[![circleci][circleci-src]][circleci-href]

[![npm version][npm-version-src]][npm-version-href]

[![Dependencies][david-dm-src]][david-dm-href]

[![npm downloads][npm-downloads-src]][npm-downloads-href]

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-1a2b34.svg?style=flat-square)](https://prettier.io)

[![License: MIT](https://img.shields.io/badge/License-MIT-black.svg?style=flat-square)](https://opensource.org/licenses/MIT)

> Easy Ghost content API integration with Nuxt.js.

[📖 **Release Notes**](./CHANGELOG.md)

[🌎 **Demo**](https://nuxt-ghost.netlify.com)

## Setup

Install with yarn:

```bash

yarn add nuxt-ghost

```

Install with npm:

```bash

npm install nuxt-ghost

```

**nuxt.config.js**

```ts

module.exports = {

  modules: ['nuxt-ghost'],

  ghost: {

    /**

     * Your Ghost url

     */

    url: 'https://demo.ghost.io/ghost',

    /**

     * Your content api key

     */

    key: '22444f78447824223cefc48062',

    /**

     * Version

     * default: v4

     */

    version: 'v4',

  },

};

```

### Hook for generating ghost routes (nuxt generate & sitemap)

Create another module file in `modules/`:

```ts

// modules/sitemap.js

import { GhostContentAPI } from 'nuxt-ghost';

export default async function (ctx) {

  const config = {

    blogPrefix: '',

    tagPrefix: 'tag',

    perPage: 3,

  };

  this.nuxt.hook('generate:before', async (nuxt, generateOptions, ...oi) => {

    const $ghost = new GhostContentAPI({

      ...nuxt.options.ghost,

    });

    const [posts, tags] = await Promise.all([

      $ghost.posts.browse({

        limit: 'all',

      }),

      $ghost.tags.browse({ order: 'slug ASC', limit: 'all', include: 'count.posts' }),

    ]);

    // Post routes

    const postsRoutes = posts.map((post) => `${config.blogPrefix}/${post.slug}`);

    // Blog routes

    const blogPagesRoutes = [];

    const totalPages = Math.ceil(posts.length / config.perPage);

    if (totalPages > 1) {

      for (let page = 2; page <= totalPages; page += 1) {

        const route = `${config.blogPrefix}/page/${page}`;

        blogPagesRoutes.push(route);

      }

    }

    // Tag routes

    const tagRoutes = tags.reduce((arr, tag) => {

      const tagRoute = `${config.blogPrefix}${config.tagPrefix}/${tag.slug}`;

      arr.push(tagRoute);

      const maxPage = Math.ceil(tag.count.posts / config.perPage);

      if (maxPage > 1) {

        for (let page = 2; page <= maxPage; page += 1) {

          const route = `${config.blogPrefix}${config.tagPrefix}/${tag.slug}/page/${page}`;

          arr.push(route);

        }

      }

      return arr;

    }, []);

    const extraRoutes = [...postsRoutes, ...blogPagesRoutes, ...tagRoutes];

    generateOptions.routes = generateOptions.routes

      ? generateOptions.routes.concat(extraRoutes)

      : extraRoutes;

    // Add to the sitemap

    if (nuxt.sitemap) {

      Object.assign(nuxt.sitemap, {

        routes: [...(nuxt.sitemap.routes && [...nuxt.sitemap.routes]), ...extraRoutes],

      });

    }

  });

}

```

Then add it to the nuxt.config:

```ts

module.exports = {

  modules: ['nuxt-ghost', './modules/sitemap.js'],

  ghost: {

    /**

     * Your Ghost url

     */

    url: 'https://demo.ghost.io/ghost',

    /**

     * Your content api key

     */

    key: '22444f78447824223cefc48062',

    /**

     * Version

     * default: v4

     */

    version: 'v4',

  },

};

```

## Development

1. Clone this repository

2. Install dependencies using `yarn install` or `npm install`

3. Start development server using `npm run dev`

## 📑 License

[MIT License](./LICENSE)

[circleci-src]: https://circleci.com/gh/Gomah/nuxt-ghost.svg?style=shield

[circleci-href]: https://circleci.com/gh/Gomah/nuxt-ghost

[npm-version-src]: https://img.shields.io/npm/dt/nuxt-ghost.svg?style=flat-square

[npm-version-href]: https://npmjs.com/package/nuxt-ghost

[npm-downloads-src]: https://img.shields.io/npm/v/nuxt-ghost/latest.svg?style=flat-square

[npm-downloads-href]: https://npmjs.com/package/nuxt-ghost

[david-dm-src]: https://david-dm.org/gomah/nuxt-ghost/status.svg?style=flat-square

[david-dm-href]: https://david-dm.org/gomah/nuxt-ghost