Nuxt Layers Demo

Demo repo for Nuxt Layers architecture article

Intro

This repo accompanies my article on using Nuxt Layers to modularise sites by domain:

• Modular site architecture with Nuxt layers

The repo is built off the Alpine Theme, because:

1. it's a good all-round, production-ready repo
2. it has enough sections that could be migrated to layers
3. it had the potential for good before and after cases

It's designed to show how an existing site can be fairly easily refactored to Nuxt layers, gaining the benefits of a site architected by domain, rather than concern.

The article introduces the reader to layers and covers various techniques to build and get the most out of a layered site.

All the techniques discussed there are employed in this demo.

Instructions

The milestones in the migration will be:

• 0.1.0 – Alpine starter repo
  Local content extending external theme
• 0.5.0 – Combined theme and content
  Local content and theme, with a traditional flat folder structure (by concern)
• 1.0.0 – Refactor to flat layers
  Repackage to core, site and articles layers (by domain)
• 1.1.0 – Refactor layers to subfolder
  Move site and articles to sub-folder (by domain, but neater)
• 1.2.0 – Refactor using Nuxt Layers Utils (TBC)
  Migrate path configuration to root (by domain, but simpler)

Check out the repo, install and run the dev build:

git clone https://github.com/davestewart/nuxt-layers-demo.git
cd nuxt-layers-demo
npm install
npm run dev

Checkout individual tags to compare configurations.

Feedback

If you have any comments or questions, feel free to create an issue, or drop a comment on the original article.

Cheers,
Dave