vue-wp-json

vue-wp-json

💫 Wordpress REST API plugin for Vue.js with out-of-box routing and data handling 💫

• Installation

  • Vue.js
  • Nuxt.js (Coming soon)
  • Vue Storefront

• Usage

  • Pages
  • Posts
  • Media
  • Menus

• PRO Version (Coming soon)

  • Custom Post Types
  • Post Statuses
  • Authentication
  • Users
  • Comments
  • Categories
  • Tags
  • Taxonomies

• External Modules (Coming soon)

  • Free Extensions

    • Yoast SEO Extension (Coming soon)
    • qTranslate Extension (Coming soon)

  • PRO Extensions

    • Advanced Custom Fields Extension (Coming soon)
    • DIVI Page Builder Extension (planned for Fall 2019)

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

2. Go to your app's main.js / main.ts file, import the module catalog and register it:

import Vue from 'vue'
import vueWpJson from 'vue-wp-json'

Vue.use(vueWpJson, {
  config: {
    url: 'your-wordpress-url.com/',
    lang: 'en', // Your site's default language. It'll be added to html lang attribute.
    menus: [
      "first-menu-slug",
      "second-menu-slug"
      // There provide your menus' slug, if you have only one menu, provide it as a string. If you do not have any menu, set to false or just delete this key
    ]
  },
  store,
  router // Injecting VueX Store and Router is obligatory
})

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)

• qTranslate Extension (Coming soon)

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

• DIVI Page Builder Extension (planned for Fall 2019)

Advanced Custom Fields Extension (Coming soon)

https://vuejs.shop/modules/vue-wp-json-acf

DIVI Page Builder Extension (planned for Fall 2019)

https://vuejs.shop/modules/vue-wp-json-divi