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

# 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