InsightSite
For business
Plugins

Page builder

The official builder plugin (free) lets you build pages visually from blocks: hero, features, image and text, stats, logos, testimonials, pricing, FAQ, call to action, rich text, latest posts, products, contact form, video and spacer. Blocks render with Nuxt UI's page components, responsive and in light and dark mode. The plugin ships with the framework (plugins/builder).

node node_modules/nuxtcms/scripts/plugin.mjs add builder
pnpm build:cf && pnpm deploy

Layouts are stored in the plugin's own tables ({prefix}builder_pages, builder_versions), created on first use: no migration of the site database.

Using it

  1. Create or open a page under Admin → Pages and save it.
  2. In the editor's "Page builder" panel click Start building to open the visual editor:
    • left: the blocks (add, move up and down);
    • middle: the live page (laid out at desktop width and scaled to fit); click a block to select it;
    • right (below the list on narrower screens): the selected block's fields: text, images (from the media library), buttons, lists of items; duplicate, hide or delete it, set a background and an anchor.
  3. Start from a template: product landing page, about us, product page, contact page (sample text in Chinese or English, following the page's language).
  4. Save updates the page at once (the public cache is cleared). The layout before each save is kept (the last 20) and can be restored from Versions.
  5. Stop using blocks, show the content shows the page's text content again (the blocks stay as a version).

A page with blocks shows them instead of its content. Each language version of a page has its own layout. Drafts are not public.

Blocks

  • Pricing: plans typed in, or "SaaS kit plans" to show the SaaS kit pricing table with its buy buttons.
  • FAQ: also emits FAQPage structured data for search engines and AI search.
  • Latest posts / Products: the newest published items.
  • Contact form: the same inquiry API, captcha and notifications as the contact page.
  • Video: YouTube, Bilibili or an mp4 file.
  • Plugin component: a component another plugin offers, such as the waitlist, feedback board or changelog of the marketing tools. Plugins register them in app.config nuxtcms.builderWidgets; nothing else renders.
  • Button links take site paths (/contact, the locale prefix is added), #anchors or full URLs; javascript: and other unsafe links are removed when saving.

On the home page or any page of a site

A site's own page (its home page, say) can show a block page:

<!-- app/pages/index.vue -->
<template>
  <BuilderPage slug="home">
    <!-- shown while there is no block page with the slug "home" -->
    <MyHome />
  </BuilderPage>
</template>

Create a page with the slug home in the admin and build it with blocks.

Testing

pnpm smoke:builder --base http://localhost:3192 runs the whole flow against a dev server: cleaning on save (unknown blocks, unsafe links, oversized layouts), rendering and hidden blocks, FAQ structured data, cache refresh, restoring versions, back to the content and access.