Vue Wordpress Nuxt.js Module

WordPress module for Nuxt.js with full support for SSR and Nuxt.js PWA module.

More Info – https://nuxt.vuewordpress.io

• Installation

  • Nuxt.js
  • Vue.js
  • Vue Storefront

• Usage

  • Pages
  • Posts
  • Media
  • Menus

• Additional modules (Coming soon)

  • Free Extensions

    • Yoast SEO Module (Coming soon)
    • i18n Module (Coming soon)

  • PRO Extensions

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

Installation

Go to your app's main directory and run:

npm install @vue-wordpress/nuxt

or

yarn add @vue-wordpress/nuxt

Create Vuex Store in your application if it does not exist. You can do it by creating index.js file in store directory and put there content like:

export const state = () => ({

})

export const mutations = {

}

export const actions = {}

Open nuxt.config.js and add @vue-wordpress/core in modules section with additional configuration.

modules: [
  [
    '@vue-wordpress/core',
    {
      config: {
        url: 'https://wp.mysite.com/',
        lang: 'en'
      },
      store: 'manual',
      router: 'manual'
    }
  ]
]

Using top level options

modules: [
  '@vue-wordpress/nuxt'
],
wpJson: {
  config: {
    url: 'https://wp.mysite.com/',
    lang: 'en'
  },
  store: 'manual',
  router: 'manual'
}

As we cannot access Router and Store from nuxt.config.js we have to set it as 'manual'. The module will do the job and inject them other way.

As a last step we have to tell Nuxt to transpile the core module.

build: {
  transpile: ['@vue-wordpress/nuxt']
}

If you use any extension you just need to add it to the transpile array:

build: {
  transpile: ['@vue-wordpress/nuxt', '@vue-wordpress/acf']
}

That is all. Now you can use Vue Worpress module for Nuxt.js!

B. Vue.js

If you want to use this module with regular Vue.js, you can use core module used by this package available here: @vue-wordpress/core

C. Vue Storefront

If you want to use this module with Vue Storefront, we have created a dedicated package available here: @vue-wordpress/vsf

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-wordpress/core 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-wordpress/core-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-wordpress/core-yoast

qTranslate Extension (Coming soon)

https://github.com/new-fantastic/@vue-wordpress/core-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-wordpress/core-acf

DIVI Page Builder Extension (planned for Fall 2019)

https://vuejs.shop/modules/@vue-wordpress/core-divi