Wuxt is a revolutionary development environment that combines the power of WordPress, the world's most popular content management system (CMS), with the flexibility of Nuxt.js, a cutting-edge front-end application framework. This innovative setup provides developers with a ready-to-use environment that streamlines the process of creating stunning web applications.

Quick Start

To get started with Wuxt, simply clone the repository and run the following command:

git clone https://github.com/northosts/wuxt.git

Next, navigate to the cloned directory and start your containers using:

docker-compose up -d

This will set up a fully functional development environment that includes WordPress, Nuxt.js, and MySQL.

Architecture

Wuxt's architecture is designed to provide developers with a seamless integration of WordPress and Nuxt.js. The setup includes three main components:

  • A MySQL container for storing data
  • A WordPress container running the latest PHP version and extended with a Rest API wrapper
  • A Nuxt.js container started in development mode with file-monitoring and browser-sync

Getting Started

Once you've set up your containers, you can access the following URLs:

  • Front-end: http://localhost:3000
  • Back-end: http://localhost:3080 and http://localhost:3080/wp-admin
  • Database: docker exec -ti mysql.wuxt bash

Generate and Deploy

To generate a fully static site with all your content, posts, and pages inside the dist directory of Nuxt.js, simply run:

yarn generate

This command will scrape your WordPress installation and generate a static site that can be deployed to any web space. To deploy the site, start a small local web-server by running:

docker-compose -f dist.yml up

WordPress Rest API Endpoints

Wuxt extends the WordPress Rest API with additional endpoints for meta-fields, featured media menus, and front-page configuration. This allows developers to easily access and manipulate data in their WordPress installation from their Nuxt.js application.

Scripts

Wuxt includes a range of scripts that make it easy to set up and customize your development environment. These include:

  • npm run env: Creates an .env file with default values for port numbers and container names.
  • yarn dev: Starts the Nuxt.js server in development mode with file-monitoring and browser-sync.

Conclusion

Wuxt is a powerful tool that streamlines the process of creating stunning web applications by combining the best of WordPress and Nuxt.js. With its easy-to-use architecture, extensive Rest API endpoints, and range of scripts, Wuxt makes it simple for developers to get started with swift app development.