Getting Started

Installation

Get started with WPNuxt by creating a new project or adding it to an existing Nuxt application.

Try it online

open demo in StackBlitz

New Project

Configure Wordpress

First set up WordPress as a headless CMS, by installing these 3 plugins:

If you want to set up dynamic routes in Nuxt to match the WordPress slugs, then set the WordPress permalinks to postname.

WPGraphQL settings

  • enable introspection

Faust plugin

  • set the front-end site url
  • copy the secret key
  • depending on how you're going to handle image url's in Nuxt, you might have to enable "Use the WordPress domain for media URLs in post content"

Add WPNuxt to your Nuxt app

pnpm add -D @vernaillen/wpnuxt

nuxt-config.ts

modules: ['@vernaillen/wpnuxt']

Configure WPNuxt

Connect WPNuxt to your wordpress installation:

wpNuxt: {
    wordpressUrl: 'https://wordpress.wpnuxt.com'
},

Include the protocol.

When you start Nuxt after adding the WPNuxt module, it might ask whether you want to install the @nuxt/image package:

 Do you want to install @nuxt/image package?
 Yes / No

More information about how to handle wordpress media: images


Copyright © 2024