Craft CMS Nuxt Blog Starter

This blog starter project is based on the official Craft CMS Blog Starter. Although suitable for all audiences, it's mainly intended for those who are new to Craft CMS and/or Nuxt.

Craft CMS

Installation

Visit the official Craft CMS Blog Starter repo and follow the installation instructions.

I'm using Craft Nitro as my local development environment. To learn more, including how to set it up, read the Craft Nitro documentation.

After completing the installation, you can populate Craft with some sample content by running the m210104_175929_sample_content.php content migration located in the migrations directory in your Craft project root.

Nuxt Headless Front End

The Nuxt headless front end uses the following NPM packages.

• Nuxt 3 beta
• Nuxt Tailwind CSS
• Tailwind CSS Typography plugin
• Prettier
• Prettier plugin for Tailwinds CSS

Installation

1. From the Craft project root, run cd headless-nuxt to switch to the headless-nuxt directory.
2. Run npm install to install the NPM packages.
3. Run npm run dev to start the local development server.

⚠️ If you are using Craft Nitro for local development, the default port 3000 may be already be taken by Nitro. If so, you can run the local development server on a different port. For example, port 5001 via PORT=5001 npm run dev.

Contributing

If you would like to contribute to the TODOs below, or have any suggestions for improvement, please open an issue or submit a pull request. Please keep in mind that the project is meant to be beginner-friendly.

TODO

This project is a work in progress.

Perfect is the enemy of good.

Nuxt

• Add support for remaining Matrix fields to templates/components.
• Fix issue with Bearer ${config.CRAFTGQL_TOKEN} not working as expected.
• Add support for GraphQL mutations to Blog Section.
• Add front-end forms to enable CRUD of Blog Section entries from the front end.
• Set up a public demo site.
• Other stuff I can't remember at the moment. 😆

Craft

• Move from Webpack to Vite when Nitro 3 released.