wp-nuxt

Features

The module adds WP-API to your nuxt application.

The size of the library is 49,8 kB minified (14 kB gzipped).

Setup

Add wp-nuxt dependency using yarn or npm to your project
Add wp-nuxt to modules section of nuxt.config.js

{
  modules: [
    // Simple usage
    'wp-nuxt',

    // With options
    ['wp-nuxt', {
      endpoint: 'https://wp.kmr.io/wp-json',
      extensions: true // For additional functions of wpapi-extensions
      /* other options of WP-API */
    }],
 ]
}

Info: when you pass extensions: true you will have additional functions of wpapi-extensions available. For this you also have to install WUXT Headless WordPress API Extensions on your wordpress sever.

Usage

You can use the API of WP-API using the injected 'app.$wp'. (s. example)

Example

<script>
export default {
  async asyncData ({ app, store, params }) {
    return { articles: await app.$wp.posts().perPage(10) }
  }
}
</script>

Basic RSS feed integration

To use an automatically generated rss feed under /feed.xml you have to add following to your the nuxt.config.js. It will automatically fetch the posts from your rest endpoint provided in the options. (demo)

const wpNuxtFeed = require('wp-nuxt/lib/rss')

module.exports = {
  feed: [
    wpNuxtFeed({
      baseUrl: 'http://localhost:3000'
    })
  ]
}

To prevent injecting the default link tag into the head you can pass the option injectDefaultHead: false. Any options such as title or description can be overwritten through the function options. For more options look into the feed module and the definition of th function.

Basic sitemap integration

Using the module nuxtjs/sitemap a opinionated sitemap is provided by default.

Specific options can be overwritten like the following in the nuxt.config.js:

module.exports = {
  wp: {
    sitemap: {
      hostname: process.env.HOSTNAME // default; format e.g. 'http://localhost:3000'
    }
  }
}

It can be completely overwritten using the sitemap property in the nuxt.config.js and deactivated using following:

module.exports = {
  wp: {
    sitemap: false
  }
}

See more options in the extension nuxtjs/sitemap or in the following file

Custom Routes

You can register your own routes e.g. for custom extentions.

module.exports = {
  wp: {
    endpoint: 'https://wp.kmr.io/wp-json',
    customRoutes: [
      {
        extension: 'wp/v2',
        route: 'custom-taxonomy',
        name: 'customTaxonomy'
      }
    ]
  }
}

This will call wp.customTaxonomy = wp.registerRoute('wp/v2','custom-taxonomy' and make it available as app.$wp.customTaxonomy()

Auto-Discovery

For more infos: https://github.com/WP-API/node-wpapi/tree/master#auto-discovery

module.exports = {
  wp: {
    endpoint: 'https://wp.kmr.io/wp-json',
    discover: true // To auto-discover routes by url provided in 'endpoint'
  }
}

Info: Make sure to handle CORS correctly. s. https://github.com/WP-API/node-wpapi/tree/master#cross-origin-auto-discovery

Browser Support

IE11 seems to work, but throws errors. (Help wanted)

License

MIT License

yashha/wp-nuxt