https://github.com/ysarock/nuxt-wp

Nuxt module to easily consume a Wordpress Headless.
https://github.com/ysarock/nuxt-wp

headless-wordpress nuxt nuxt-module nuxt3 wordpress

Last synced: 8 days ago
JSON representation

Nuxt module to easily consume a Wordpress Headless.

• Host: GitHub
• URL: https://github.com/ysarock/nuxt-wp
• Owner: YsarocK
• Created: 2024-03-06T14:29:02.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-03-16T09:14:44.000Z (8 months ago)
• Last Synced: 2024-11-02T10:31:42.942Z (15 days ago)
• Topics: headless-wordpress, nuxt, nuxt-module, nuxt3, wordpress
• Language: TypeScript
• Homepage: https://nuxt-wp.pages.dev
• Size: 4.26 MB
• Stars: 8
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
![nuxt-wp banner](./readme-banner.jpg)

# Wordpress x Nuxt 3

![npm](https://img.shields.io/npm/dt/nuxt-wp)

![npm](https://img.shields.io/npm/v/nuxt-wp)

**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](https://nuxt-wp.pages.dev).

# Getting Started

## Prerequisites

- [Node.js](https://nodejs.org/) version 18 or higher.

- An accessible Wordpress instance, with API enabled.

- [Wordpress Application credentials](https://make.wordpress.org/core/2020/11/05/application-passwords-integration-guide/) to use advanced features (Optional):

  - Menus

  - Contact form

## Installation

### Setup

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

```sh

# 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:

```ts

// nuxt-config.ts

export default defineNuxtConfig({

  modules: ['nuxt-wp'],

})

```

### Config

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

```sh

# .env

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

```

```ts

// 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:

```sh

# .env

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

WP_APPLICATION_USER=your-username

WP_APPLICATION_PASSWORD=your-password

```

```ts

// 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](https://nuxt-wp.pages.dev).