vue-wp-json
💫 Wordpress REST API plugin for Vue.js with out-of-box routing and data handling 💫
Installation
A. Vue.js
1. Go to your app's main directory and run:
npm install vue-wp-json
or
yarn add vue-wp-json
main.js
/ main.ts
file, import the module catalog and register it:
2. Go to your app's Vue
If you would like to set proper meta tags automatically for Pages/Posts, all you need to do is to install vue-meta-info
and register it as a plugin, for example in your main.js/ts
import Vue from 'vue'
import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)
B. Nuxt.js (Coming soon)
For Nuxt.js we have developed a dedicated module that is available here: nuxt-wp-json
C. Vue Storefront
For Vue Storefront we have developed a dedicated module that is available here: vsf-wp-json
Usage
Pages
All you need to do to create new Page's route in your app is to create it in Wordpress Admin in Pages tab. It will automatiaclly be available under /page/<:page_slug>
route.
Posts
The process is the same as above. You just need to create and publish new post in Wordpress Admin at Posts tab. It will automatiaclly be available under /post/<:post_slug>
route.
Media
To be written.
Menus
To be able to use WordPress Menus in your app, you have to install additional plugin in your WordPress - WP-REST-API V2 Menus plugin. It extends native Wordpress REST API by adding a new endpoint with menus at /wp-json/menus/v1/menus/
. After you have added the plugin vue-wp-json
will automatically detect and store your menus at:
store.state.wp_rest_content.menus[YOUR_MENU_SLUG]
this.$store.state.wp_rest_content.menus[YOUR_MENU_SLUG]
Advanced Usage
More information about additional features available with PRO version of module will be available here: https://vuejs.shop/modules/vue-wp-json-pro
Additional modules (Coming soon)
Free Extensions
Yoast SEO Extension (Coming soon)
https://github.com/new-fantastic/vue-wp-json-yoast
qTranslate Extension (Coming soon)
https://github.com/new-fantastic/vue-wp-json-qtranslate-x
PRO Extensions
Advanced Custom Fields Extension (Coming soon)
https://vuejs.shop/modules/vue-wp-json-acf