Nuxt Ghost

Nuxt Ghost is a Nuxt.js module that integrates the Ghost content API, allowing Nuxt applications to fetch posts and tags from a headless Ghost CMS. This open-source module, maintained by Gomah, is designed for developers who want to use Ghost as a content backend and Nuxt as the frontend, with support for static site generation and sitemap generation.

What is Nuxt Ghost?

Nuxt Ghost is a Nuxt module that connects to the Ghost Content API. To use it, you add nuxt-ghost to the modules array in nuxt.config.js and supply your Ghost URL, Content API key, and an API version (default is v4). The module exports a GhostContentAPI class with methods to browse posts and tags. It also provides a hook for generating static routes for nuxt generate, making it easy to build static blogs or content sites.

What makes Nuxt Ghost stand out?

• Simple setup — Add a few lines to nuxt.config.js: include 'nuxt-ghost' in modules and set the ghost property with url, key, and version.
• Content API client — Import GhostContentAPI from nuxt-ghost to fetch posts with posts.browse and tags with tags.browse, including options like limit, order, and include.
• Route generation hook — A built-in hook for the Nuxt generate:before event creates routes for every post, blog pagination page, and tag pagination page, so nuxt generate builds all pages.
• Pagination support — The route generator creates /page/2 and subsequent pages based on a configurable perPage value (example uses 3 posts per page).
• Sitemap integration — When the Nuxt sitemap module is loaded, the generated routes are automatically merged into the sitemap options.
• Ghost v4 by default — The module defaults to the Ghost Content API v4, but you can change the version option.

Who is it for?

• Nuxt.js developers who want to use Ghost as a headless CMS and need a quick way to query content without writing their own API client.
• Static site builders who use nuxt generate and need all blog and tag URLs pre-rendered into the output.
• Blog and content website owners who prefer Ghost's admin interface but want the performance and flexibility of a Nuxt frontend.

What can you do with Nuxt Ghost?

• Blog developers: Fetch posts and tags from Ghost in a Nuxt app using the GhostContentAPI client, then display them with custom Vue components.
• Static site generators: Use the route-generation hook to add post, page, and tag routes automatically during build, ensuring a complete static site from a single command.
• Site maintainers: Keep your sitemap up to date automatically by enabling the Nuxt sitemap module alongside nuxt-ghost; the hook merges routes into the sitemap.

How does Nuxt Ghost work?

After installing the package and configuring it in your Nuxt project, you can import GhostContentAPI directly in your code. The route-generation hook lives in a custom module file you create under modules/. In that file, you instantiate the API with your Ghost settings, fetch all posts and tags, and build an array of routes. This array is assigned to generateOptions.routes. The hook also checks if nuxt.sitemap exists and appends the routes there.

FAQ

Is nuxt-ghost free?

Yes, nuxt-ghost is open-source and released under the MIT License, so it is free to use and modify.

What Ghost version is supported?

The default version is v4, and it can be changed via the version option in the Ghost module configuration.

How do I generate routes for all posts and tags?

Use the provided hook in a custom module file inside modules/. The hook fetches all posts and tags, then adds routes for each post, blog pagination pages, and tag pagination pages to generateOptions.routes.

Can I use nuxt-ghost without nuxt generate?

Yes, you can import GhostContentAPI directly in your Nuxt app to query Ghost content at runtime or during server-side rendering.

Does nuxt-ghost work with the Nuxt sitemap module?

Yes, the example hook checks if nuxt.sitemap exists and merges the generated routes into the sitemap's route list.