yashha / wp-nuxt

NOT MAINTAINED The module adds WP-API to your nuxt application.

wp-nuxt

📖 Release Notes

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

Copyright (c) yashha

wp-nuxt's Issues

Add support for wuxt wp rest extensions

https://github.com/northosts/wuxt/tree/master/nuxt/modules/wp-api
https://github.com/northosts/wuxt/tree/master/wp-content/mu-plugins/wuxt-headless-wp-api-extensions

It would be good to log when the api point is not reachable, when executing a certain cmd.

Create more than one WPAPI instance (with different endpoints)

Hey there,

I am using wp-nuxt to integrate a wordpress multisite-network (mutliple languages). So far it works great, however I am having a hard time figuring out whether or not it is possible to define multiple endpoints in the nuxt.config.js, like in the following example.

This is the standard way defining one WPAPI instance which can be referenced using this.$wp in vuex:
nuxt.config.js

...
  modules: [
    "wp-nuxt",
  ],
wp: {
    endpoint: "http://cmshost/wp-json/",
}
...

Now, I want to have a second (or more) WPAPI instance(s) providing a different endpoint. In my case the endpoint would vary by locale:

nuxt.config.js

...
  modules: [
    "wp-nuxt",
  ],
wp: {
    endpoint: ["http://cmshost/wp-json/", "http://cmshost/wp-json/de"],
}
...

Is this possible using wp-nuxt or do I need to change using node-wpapi directly and do the nuxt integration myself?

Thanks in advance,
Valentin

Feature: Auto Discover & Custom Routes

Routes as: "wp/v2/custom-taxonomy" aren't visible.
Module node-wpapi don't accept .discovery() function - undefined right now.

Right now solution:
Need to add plugin to nuxt.config.js as custom plugin plugins/wpapi-extend.js:

export default ({ app }) => {
    app.$wp.customTaxonomy = app.$wp.registerRoute( 'wp/v2', '/custom-taxonomy');
    app.$wp.customTaxonomy = app.$wp.registerRoute( 'wp/v2', '/custom-taxonomy/(?P<id>[\\d]+)' );
}

Refer:
https://github.com/WP-API/node-wpapi/tree/v1#auto-discovery

Hint:
Add option to module setting adding new routes from array of object.
Example:

{
  "extension" : "wp/v2", 
  "route" : "custom-taxonomy",
 "name" : "customTaxonomy" //Default PascalCode, option to have unique name if similar with default ones
}

Changing wp endpoint in runtime

Hello
Is it possible to change endpoint in runtime?
My aim is when language changes, set endpoint to another url.

Thanks

IE 11 syntax error

We have an issue when we are using wp-nuxt out of the box on ie11, we get a syntax error in the superagent library (yarn run dev -> vendor.app.js):

.forEach(fn => {

Problem is that arrow-functions (and other ES6) do not work in ie11, so we added all libraries to transpile in the build option. That solves the first error and a couple of others that are following and are ES6 related. Unfortunately, now we are stuck with the following error, which we can't find any fix for (vendor.app.js): "Unable to get property 'replace' of undefined or null reference".

namedGroupedPattern.replace(

Is there a fix for that?