nuxt-blogger v0.0.6

Nuxt Blogger

Build a blog into your Nuxt.js app.

Take a look at the example blog.

Features

• Write articles using Markdown.
• Automatically generate Open Graph Metadata for SEO.
• Collections, Tags and Keywords to group and organise articles.
• Simple Disqus integration for comments and discussion on articles.
• Static generation.
• Highly customisable
• Simple integration into an existing Nuxt application - your app doesn't need to be designed from the ground up to be a blog!

Installation

Install package from NPM:

$ npm install nuxt-blogger --save

Add to nuxt.config.js modules configuration:

// nuxt.config.js
export default {
    modules: [
        ['nuxt-blogger', { blogTitle: 'My Awesome Blog' }]
    ]
}

Usage

1. Place Markdown articles in a /blog directory within your Nuxt project.
2. That's it! You can now build your nuxt app as asual and your blog will be accessible at <nuxt_site_url>/blog.

Local Development

When using the Nuxt development server, the Blog is automatically re-generated on each request to allow live changes to be reflected. Start the development server:

$ nuxt

Open localhost:3000 in a browser and start editing articles.

Static Generation

Nuxt Blogger supports Nuxt static generation. Ensure that the static option is set to true within the module options (true by default):

// nuxt.config.js
export default {
    modules: [
        ['nuxt-blogger', { static: true }]
    ]
}

Generate your Nuxt app as usual:

$ nuxt generate

Configuration

Nuxt Blogger is highly configurable, the available options are defined by:

// src/options.ts

export interface NuxtBloggerOptions {
  base: string
  publicPath: string
  comments: boolean
  static: boolean
  dir: string
  appRoutes: AppRoutes
  api: {
    prefix: string
    routes: { [name: string]: ApiRoute }
  }
  useCustomComponents: boolean
  fontAwesome: boolean
  bulma: boolean
  blogTitle?: string
  disqus?: {
    shortname: string
    url?: string
    api_key?: string
    sso_config?: string
  }
  twitter?: any
  og?: any
  fb?: any
  markdown: {
    markdownit?: MarkdownIt.Options
    plugins?: any[]
  }
}

The default options are defined by:

// src/options.ts

export const defaultOptions: NuxtBloggerOptions = {
  base: 'http://localhost:3000',
  publicPath: '/_nuxt/',
  comments: false,
  static: true,
  dir: 'blog',
  appRoutes,
  api: {
    prefix: 'api/blog',
    routes: apiRoutes
  },
  useCustomComponents: false,
  fontAwesome: true,
  bulma: true,
  blogTitle: 'My Blog',
  markdown: {
    plugins: [require('markdown-it-decorate'), require('markdown-it-emoji')]
  }
}