Nuxt Visual Editor

Nuxt visual (layout) editor components rewrite from vue-drag-and-drop-page-builder with typescript, nuxt-headlessui and tailwindcss

• ✨  Release Notes

Quick Setup

1. Install using NPM or Yarn

npm install nuxt-visual-editor

OR

yarn add nuxt-visual-editor

2. Add nuxt-visual-editor to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: ["nuxt-visual-editor"],
  // default options
  visualEditor: {
    image_providers: { base64: true },
    theme: {
      myPrimaryBrandColor: "#000000",
      myPrimaryLinkColor: "#2563eb",
      myPrimaryLightGrayColor: "#e2e8f0",
      myPrimaryMediumGrayColor: "#9ca3af",
      myPrimaryDarkGrayColor: "#111827",
      myPrimaryErrorColor: "#d60000",
      myPrimarySuccesColor: "#16a34a",
    },
  },
});

To avoid seeing warnings from Vue about a mismatch in content, you'll need to wrap the VisualEditor component with the ClientOnly component Nuxt provides as shown here:

<template>
  <ClientOnly>
    <VisualEditor />
  </ClientOnly>
</template>

Props

Name	Type	Description
modelValue	string v-model	initial value to be rendered
components	Component[]	a custom components list
categories	string[]	a custom categories list (Used to group components in a menu.)

Component

Property	Type	Description
name	string	component's name
category	string	component's category name
imageSrc	string	component's preview image
html	string	component's html conntent (There must always be one tag as the root element.)

Events

Name	Parameters	Description
update:modelValue	html	html value emitted on edit content

Example

Example - Basic Usage with custom components & categories

<template>
  <ClientOnly>
    <VisualEditor
      v-model="html"
      :components="components"
      :categories="categories"
    />
  </ClientOnly>
</template>

<script setup lang="ts">
const html = ref("");
const components = ref([
  {
    name: "paragraphs",
    category: "text",
    imageSrc: "paragraphs.png",
    html: '<section class="text-gray-500"> <p>Paragraph 1</p> <p>Paragraph 2</p> <p>Paragraph 3</p> </section>',
  },
  {
    name: "avatar",
    category: "image",
    imageSrc: "avatar.png",
    html: '<section> <img class="aspect-square" alt="" src="placeholder_image.jpg" > </section>',
  },
]);
</script>

WIP

• custom slots
• custom image providers
• true two-way binding (currently partial)
• control props for other states (eg. sidebarOpen, preview)

Contribution

Local development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release