nuxt-wp-api

Features

The module adds WP-API to your nuxt application as well as some additional Endpoints.

Installation

npm install @lesgensdelatechnique/nuxt-wp-api yarn add @lesgensdelatechnique/nuxt-wp-api

Setup

Add @lesgensdelatechnique/nuxt-wp-api to the modules section of nuxt.config.js

{
  modules: [
    ['@lesgensdelatechnique/nuxt-wp-api', {
      endpoint: 'https://your.domain/wp-json',
    }],
 ]
}

Usage

You have access to all WP-API API Endpoints as well as some others using the injected app.$wp. (see examples below)

Examples

Using the WP-API API

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

export default {
  async asyncData ({ app, store, params }) {
    return { page: await app.$wp.pages().slug('your-page-slug') }
  }
}

Using the additional Endpoints

Pages template

/* Search for pages using the page-contact.php file. */

$wp.pagesTemplate().template('contact')
$wp.pagesTemplate().template('contact').embed()

Front page

Such as the $wp.postsPage() Endpoint, it will return a list of posts if no front-page/posts-page has been defined in your Wordpress settings.

$wp.frontPage()
$wp.frontPage().embed()

Posts page

$wp.postsPage()
$wp.postsPage().embed()

Privacy Policy page

$wp.privacyPolicyPage()
$wp.privacyPolicyPage().embed()

Menus

$wp.menus()
$wp.menus().location('the-menu-location')

Custom post types

The cpt function returns similar objects as the posts() or pages() queries.

$wp.cpt('movies')
$wp.cpt('movies').id(9)

Available languages ( requires the Polylang plugin )

$wp.languages()

Forms ( requires the Ninja Forms plugin )

$wp.forms()
$wp.forms().id(1)

// Submit a post request to store a submission on Ninja forms dahsboard.

$wp.forms().id(1).create({
    formData: {
        firstName: 'Jean',
        lastName: 'Dupont',
        email: '[email protected]
    },
}).then(function(response) {
    console.log(response)
}).catch(function(error) {
    console.log("Oops, something happened", error)
})

NOTE TO DEVELOPERS

To update the package on npm:

• Change the version of the package

package.json

{
  "version": "1.2.3"
}

• Commit your changes git commit -am "my commit message"
• Tag your commit git tag -a v1.2.3 -m "my version 1.2.3"
• Then run npm run release