hex-digital / nuxtpress

A modern Nuxt + WordPress starter kit, with support for SPA, Universal and Generated sites.

NuxtPress - WordPress x Nuxt Development Environment

NuxtPress combines WordPress, the worlds biggest CMS with NuxtJS, a brilliant front-end application framework, built on top of Vue.

This README contains the quick start and intro documentation.
Check out the documentation directory for more detailed information on NuxtPress.

• Quick Start
• Introduction
• Getting started
  • With Docker
    • Setup WordPress
    • Setup Nuxt.js
    • Custom container configuration
  • Without Docker
    • Setup WordPress
    • Setup Nuxt.js
    • URL and Port Configuration
• WordPress Rest API endpoints
  • Extensions to the API endpoints
    • Front-page
    • Menus
    • Slugs
    • Meta queries
    • Taxonomy queries
    • Geo queries
    • Custom post types
• Development Tools
  • StoryBook
  • Jest (Unit + Snapshot Testing)
  • SCSS
  • Lint Staged Files on Commit
  • Scripts
    • Working with the containers
      • WP-CLI and yarn
    • Scaffolding
• Generate and Deploy
• Links
• Credits

Quick start

git clone https://github.com/hex-digital/nuxtpress.git
cd nuxtpress
docker-compose up -d wp.nuxtpress
cd nuxt && cp .env.dist .env && cp assets/scss/settings/_settings.config.dist.scss assets/scss/settings/_settings.config.scss
yarn install && yarn dev

• http://localhost:3080/install.php - Install WordPress
• http://localhost:3080/wp-admin/options-permalink.php - Set permalinks to Post name
• http://localhost:3080/wp-admin/themes.php - Activate nuxtpress-theme
• http://localhost:3000 - Done

Introduction

NuxtPress aims to provide a ready to use development environment, combining WordPress with Nuxt. Included are:

• Fully dockerized WordPress and NuxtJS containers, setup in one command: docker-compose up -d

• Extended Rest API gives easy access to meta-fields, featured media menus and front-page config.

• Latest NuxtJS, with a WordPress $wp object, to connect to the extended WordPress Rest API.

This allows you to skip all the backend coding, but provides the flexibility to extend the backend if you want to.

Showcase

The following sites are powered by NuxtPress:

https://prostack.uk

Get in touch to have your site listed here.

Links

WUXT Headless WordPress API Extensions: Plugin which includes all our API extensions.

Credits

@northosts for the fantastic Wuxt framework on which NuxtPress is hugely dependent. https://github.com/northosts/wuxt
@yashha for the excellent idea with the $wp object, first implemented in https://github.com/yashha/wp-nuxt