Getting Started
Installation
Get started with WPNuxt by creating a new project or adding it to an existing Nuxt application.
Try it online
New Project
Configure Wordpress
First set up WordPress as a headless CMS, by installing these 3 plugins:
- WPGraphQL
- WPEngine's Faust.js
- WPEngine's WPGraphQL Content Blocks (you'll need to download the latest release as a zip file from the release page on github and install manually in wordpress)
WordPress permalinks
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 Core to your Nuxt app
Install the module to your Nuxt application with one command:
npx nuxi module add @wpnuxt/core
Configure WPNuxt
Connect WPNuxt to your wordpress installation in your nuxt.config.ts:
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