YsarocK / nuxt-wp

Nuxt module to easily consume a Wordpress Headless.

Wordpress x Nuxt 3

Easy queries 💡 Get pages, posts data based on current or provided slug. Get posts by categories.

Handles menu 🧭 Retrieves your menus.

Contact Form 7 support ✉️ Displays a form based on your CF7 config and submit it automatically through API.

Documentation.

Getting Started

Prerequisites

• Node.js version 18 or higher.
• An accessible Wordpress instance, with API enabled.
• Wordpress Application credentials to use advanced features (Optional):
  • Menus
  • Contact form

Installation

Setup

You can install nuxt-wp using npm, pnpm, yarn or bun:

# Using npm
$ npm add -D nuxt-wp

# Using pnpm
$ pnpm add -D nuxt-wp

# Using yarn
$ yarn add -D nuxt-wp

# Using bun
$ bun add -D nuxt-wp

Then, add nuxt-wp to your Nuxt configuration:

// nuxt-config.ts
export default defineNuxtConfig({
  modules: ['nuxt-wp'],
})

Config

In order to work, you need to provide the API endpoint:

# .env
WP_API_ENDPOINT=https://your-wordpress-site.com/wp-json

// nuxt-config.ts
export default defineNuxtConfig({
  wordpress:{
    apiEndpoint: 'https://your-wordpress-site.com/wp-json',
  },
})

If you want to use advanced features, you need to provide Application Credentials too:

# .env
WP_API_ENDPOINT=https://your-wordpress-site.com/wp-json
WP_APPLICATION_USER=your-username
WP_APPLICATION_PASSWORD=your-password

// nuxt-config.ts
export default defineNuxtConfig({
  wordpress:{
    apiEndpoint: 'https://your-wordpress-site.com/wp-json

',


    applicationUser: 'your-username',
    applicationPassword: 'your-password'
  },
})

See more in Documentation.