Build Nuxt.js Page Builders Visually

Provides expert guidance for building sophisticated drag-and-drop page builders and content management systems in Nuxt.js - dynamic component rendering, composable-based state management, and flexible property editing.

Use this skill when building a visual page builder or CMS interface in Nuxt, implementing drag-and-drop block reordering, creating a centralized undo/redo state store for editor content, building a dynamic property panel that adapts to block type, or optimizing rendering performance for pages with many blocks. Not a fit for static Nuxt page development without a visual editing interface, or for non-Vue/Nuxt frameworks.

Component architecture uses a dynamic <component :is> renderer mapping block type strings (hero, text, image, columns) to concrete block components, emitting update/delete events upward. State management is centralized in a usePageBuilder composable exposing readonly blocks, selectedBlock, and isDragging refs, with addBlock/updateBlock/deleteBlock/moveBlock methods and a history stack supporting undo/redo via deep-cloned snapshots.

Drag-and-drop is implemented with vuedraggable's Draggable component bound to the blocks array, using a drag handle, ghost/chosen/drag CSS classes, and drag-start/end handlers to toggle a drop-zone indicator. The dynamic properties panel renders form controls (text input, color picker, image upload, select dropdown) based on a per-block-type property schema, updating the block's props object on change.

Advanced features include a useResponsiveProps composable managing breakpoint-aware property values (mobile/tablet/desktop) that fall back to the desktop value when no responsive override exists, and a useTemplates composable for saving the current block tree as a named, categorized reusable template and applying it back with freshly generated block IDs. Performance guidance includes a virtual scrolling implementation that renders only the blocks visible within the scroll viewport, computing offsets from scroll position and average block height.

Best practices recommend lazy-loading block components via dynamic imports to reduce initial bundle size, debouncing property updates to avoid excessive API calls, validating block schemas for data integrity, implementing auto-save with conflict resolution, adding keyboard shortcuts (e.g. Ctrl+Z for undo), ensuring drag-and-drop remains keyboard-accessible, and supporting touch-friendly mobile controls.

Built on Nuxt.js/Vue 3 composables and <script setup>, using vuedraggable for drag-and-drop and Cloudinary (or similar) for image uploads within the properties panel.

Nuxt/Vue developers building a visual page builder or CMS editing interface who need concrete patterns for block state management, drag-and-drop, dynamic property panels, and performance at scale rather than a static Nuxt page tutorial.

const { blocks, addBlock, updateBlock, undo, redo } = usePageBuilder()