Nuxt.js Page Builder: One Module, Infinite Websites

From "Writing Code" to "Stacking Blocks"

Traditional web development means writing HTML, tweaking CSS, connecting APIs — a single homepage can take days. This page builder flips that paradigm: you simply drag modules and assemble pages like building blocks. On the left, a clearly categorized component panel; on the right, a WYSIWYG real-time canvas. From carousels to article lists, from comment sections to course players — drag, configure, and the page comes alive.

Even better, it's not just static placement. Behind every module is a complete data pipeline. Select an "Article List" module, configure categories, sorting, and pagination — the system automatically fetches and renders data from WordPress. You're configuring rules, not dead data.

Seven Module Categories, Covering Every Scenario

The builder's toolbar is organized into seven groups, covering the entire spectrum from content display to user interaction:

These 40+ modules are not rigid templates — each has its own configuration form. A single "Article List" module can spawn dozens of different display variations through its configuration options alone.

Real-Time Multi-Device Preview

Designed on desktop — how does it look on mobile? The builder offers three device views — Desktop, Tablet, Mobile — with one-click switching, scaling the canvas to the target width instantly. Combined with the zoom slider (25%-200%), every pixel of responsive behavior is under your control.

JSON Import/Export: Pages as Files

The most powerful feature is arguably data import/export. Your carefully configured page can be exported as JSON with a single click — containing all module configurations. Switch sites, switch environments — import and it's restored instantly.

This is game-changing for:

• Multi-site deployment: Configure a homepage once, export, and batch-deploy to sub-sites
• A/B testing: Export two variants, switch instantly to compare
• Version rollback: Export before major changes, restore in seconds if something breaks
• Team collaboration: Designer exports config, developer imports with one click

Per-Page Independent Settings

Beyond module orchestration, the builder provides page-level global settings:

The custom CSS field lets you inject page-specific styles — something that requires extra plugins or theme code in traditional CMS setups.

Technical Highlights

markRaw Memory Optimization: Each module's JSON Schema form configuration can be massive. The builder uses Vue's markRaw API to mark these config objects as never-to-be-proxied, avoiding reactive's recursive tracking. With 50 modules on a page, memory usage drops by over 90%.

Recursive Reorganization: Imported/cloned data must merge with module prototype schemas. The builder uses reorganizePageData to recursively traverse all modules and their children, intelligently merging via radash.assign.

Effect Scope Isolation: All data watchers are wrapped in effectScope. When the component unmounts, scope.stop() cleans up all side effects at once — zero memory leaks.

Summary

This page builder is not simple "visual editing" — it's a complete page orchestration engine. Drag modules to define structure, configure forms to inject data rules, export JSON for migration. One person, one afternoon — build a fully structured, data-driven, multi-device-responsive website.

Suitable for: Corporate websites, e-commerce stores, online education platforms, knowledge-sharing communities, portfolio sites, event landing pages, documentation centers, team introduction pages, SaaS product pages — virtually any content-driven website imaginable.