All Projects → Gomah → nuxt-ghost

Gomah / nuxt-ghost

Licence: MIT license
Easy Ghost content API integration with Nuxt.js.

Programming Languages

Vue
7211 projects
javascript
184084 projects - #8 most used programming language
shell
77523 projects

Projects that are alternatives of or similar to nuxt-ghost

nuxt-babel
Use normal .babelrc file with your Nuxt app
Stars: ✭ 32 (+18.52%)
Mutual labels:  nuxt, nuxtjs, nuxt-module
lumen-cms
GraphQL API-First CMS based on NodeJS and Vue 2, Nuxt and Vuetify
Stars: ✭ 77 (+185.19%)
Mutual labels:  nuxt, nuxtjs, nuxt-module
nuxt-feature-toggle
The nuxt feature toggle module
Stars: ✭ 78 (+188.89%)
Mutual labels:  nuxt, nuxtjs, nuxt-module
date-fns-module
Modern JavaScript date utility library - date-fns for Nuxt.js
Stars: ✭ 68 (+151.85%)
Mutual labels:  nuxt, nuxtjs, nuxt-module
nuxt-speedkit
nuxt-speedkit will help you to improve the lighthouse performance score (100/100) of your website.
Stars: ✭ 401 (+1385.19%)
Mutual labels:  nuxt, nuxtjs, nuxt-module
separate-env-module
Tear your variables apart!
Stars: ✭ 53 (+96.3%)
Mutual labels:  nuxt, nuxtjs, nuxt-module
k-domains
A simple module to manage multiple subdomains with just one project
Stars: ✭ 41 (+51.85%)
Mutual labels:  nuxt, nuxtjs, nuxt-module
nuxt-mail
Adds email sending capability to a Nuxt.js app. Adds a server route, an injected variable, and uses nodemailer to send emails.
Stars: ✭ 62 (+129.63%)
Mutual labels:  nuxt, nuxtjs, nuxt-module
nuxt-typo3
TYPO3 Frontend rendered in Vue.js and Nuxt (frontend for EXT:headless)
Stars: ✭ 66 (+144.44%)
Mutual labels:  nuxt, nuxtjs, nuxt-module
nuxt-gsap-module
GSAP module for Nuxt.js
Stars: ✭ 183 (+577.78%)
Mutual labels:  nuxt, nuxtjs, nuxt-module
applicationinsights-module
Application Insights module for NuxtJS
Stars: ✭ 14 (-48.15%)
Mutual labels:  nuxt, nuxtjs, nuxt-module
nuxt-ts-module
A tiny module to use Typescript within Nuxt.js application.
Stars: ✭ 21 (-22.22%)
Mutual labels:  nuxt, nuxtjs, nuxt-module
yamlful
YAML-based HTTP client code generation
Stars: ✭ 77 (+185.19%)
Mutual labels:  nuxt, nuxtjs, nuxt-module
nuxt-quasar
Nuxt module for the Quasar Framework
Stars: ✭ 36 (+33.33%)
Mutual labels:  nuxt, nuxtjs, nuxt-module
nuxt-winston-log
Nuxt module for logging SSR errors using winston
Stars: ✭ 41 (+51.85%)
Mutual labels:  nuxt, nuxtjs, nuxt-module
global-components
Module to register global components for Nuxt.js
Stars: ✭ 57 (+111.11%)
Mutual labels:  nuxt, nuxtjs, nuxt-module
nuxt-stencil
Easy Stencil.js component library integration with Nuxt.js.
Stars: ✭ 16 (-40.74%)
Mutual labels:  nuxt, nuxtjs, nuxt-module
nuxt-prune-html
🔌⚡ Nuxt module to prune html before sending it to the browser (it removes elements matching CSS selector(s)), useful for boosting performance showing a different HTML for bots/audits by removing all the scripts with dynamic rendering
Stars: ✭ 69 (+155.56%)
Mutual labels:  nuxt, nuxtjs, nuxt-module
Example Ecommerce Snipcart Vue
The Transglobal Candy Store: Sample front-end for the Sanity.io e-commerce schema with vue.js, nuxt.js, and snipcart
Stars: ✭ 89 (+229.63%)
Mutual labels:  nuxt, nuxtjs, headless-cms
vue-plausible
Plausible Analytics Vue.js Plugin and NuxtJS Module
Stars: ✭ 107 (+296.3%)
Mutual labels:  nuxt, nuxtjs, nuxt-module

nuxt-ghost

👻 Ghost Module

circleci npm version Dependencies npm downloads code style: prettier License: MIT

Easy Ghost content API integration with Nuxt.js.

📖 Release Notes

🌎 Demo

Setup

Install with yarn:

yarn add nuxt-ghost

Install with npm:

npm install nuxt-ghost

nuxt.config.js

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/:

// 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:

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].