Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yashha/wp-nuxt
NOT MAINTAINED The module adds WP-API to your nuxt application.
https://github.com/yashha/wp-nuxt
frontend javascript nuxt rest-api ssr wordpress wp-api wp-nuxt
Last synced: 9 days ago
JSON representation
NOT MAINTAINED The module adds WP-API to your nuxt application.
- Host: GitHub
- URL: https://github.com/yashha/wp-nuxt
- Owner: yashha
- License: mit
- Archived: true
- Created: 2017-11-13T01:16:50.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T03:43:23.000Z (over 1 year ago)
- Last Synced: 2024-09-19T15:10:53.154Z (about 2 months ago)
- Topics: frontend, javascript, nuxt, rest-api, ssr, wordpress, wp-api, wp-nuxt
- Language: JavaScript
- Homepage: https://wp-nuxt.netlify.com/
- Size: 3.79 MB
- Stars: 219
- Watchers: 4
- Forks: 18
- Open Issues: 32
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# wp-nuxt
[](https://www.npmjs.com/package/wp-nuxt)
[](https://www.npmjs.com/package/wp-nuxt)
[](https://circleci.com/gh/yashha/wp-nuxt)
[](https://codecov.io/gh/yashha/wp-nuxt)
[](https://david-dm.org/yashha/wp-nuxt)
[](http://standardjs.com)
[](https://app.fossa.io/projects/git%2Bgithub.com%2Fyashha%2Fwp-nuxt?ref=badge_shield)
[](https://app.netlify.com/sites/wp-nuxt/deploys)
[📖 **Release Notes**](./CHANGELOG.md)
## Features
The module adds [WP-API](https://github.com/WP-API/node-wpapi) to your nuxt application.
The size of the library is 49,8 kB minified (14 kB gzipped). [](https://bundlephobia.com/result?p=wpapi)
## Setup
- Add `wp-nuxt` dependency using yarn or npm to your project
- Add `wp-nuxt` to `modules` section of `nuxt.config.js`
```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](https://github.com/yashha/wpapi-extensions) available. For this you also have to install [WUXT Headless WordPress API Extensions](https://wordpress.org/plugins/wuxt-headless-wp-api-extensions/) on your wordpress sever.
## Usage
You can use the API of [WP-API](https://github.com/WP-API/node-wpapi) using the injected 'app.$wp'. (s. example)
### Example
```js
export default {
async asyncData ({ app, store, params }) {
return { articles: await app.$wp.posts().perPage(10) }
}
}
```
## 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](https://wp-nuxt.netlify.com/feed.xml))
```js
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](https://github.com/nuxt-community/feed-module) and the [definition of th function](https://github.com/yashha/wp-nuxt/blob/master/lib/rss/index.js).
## Basic sitemap integration
Using the module [nuxtjs/sitemap](https://github.com/nuxt-community/sitemap-module) a opinionated sitemap is provided by default.
Specific options can be overwritten like the following in the `nuxt.config.js`:
```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:
```js
module.exports = {
wp: {
sitemap: false
}
}
```
See more options in the extension [nuxtjs/sitemap](https://github.com/nuxt-community/sitemap-module) or in the following [file](https://github.com/yashha/wp-nuxt/blob/master/lib/module/sitemap.js)
## Custom Routes
You can register your own routes e.g. for custom extentions.
```js
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
```js
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](https://github.com/yashha/wp-nuxt/issues/67))
## License
[MIT License](./LICENSE)
Copyright (c) [yashha](https://github.com/yashha)
[](https://app.fossa.io/projects/git%2Bgithub.com%2Fyashha%2Fwp-nuxt?ref=badge_large)