Nuxt Unlayer

Add the Unlayer Editor to your Nuxt app easily.

Demo

** Click Open in New Tab when you visit this link ** Here is a link to the demo Nuxt unlayer demo

Quick Setup

1. Add nuxt-unlayer dependency to your project

# Using yarn
yarn add --dev nuxt-unlayer

# Using npm
npm install --save-dev nuxt-unlayer

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

export default defineNuxtConfig({
  modules: ["nuxt-unlayer"],
});

That's it! You can now use Nuxt Unlayer in your Nuxt app ✨

Full Example

Full Example

<template>
  <main class="main">
    <header class="header">
      <h1>Nuxt Unlayer</h1>
      <div v-if="editor" class="nav">
        <button @click="exportHTML">Export HTML</button>
        <button @click="hiddenFile.click()">Import Design</button>
        <button @click="saveDesign" class="btn">Save Design</button>
      </div>
    </header>
    <section class="editor">
      <ClientOnly>
        <EmailEditor @ready="editorLoaded" />
      </ClientOnly>
    </section>
  </main>
  <input
    @change="importDesign"
    type="file"
    hidden
    ref="hiddenFile"
    accept=".json"
  />
</template>

<script setup lang="ts">
import { useHead, shallowRef, ref } from "#imports";
import sample from "@/sample.json";
import { type EditorInstance } from "#unlayer/props";

useHead({ title: "Nuxt - Unlayer" });

const editor = shallowRef<EditorInstance | null | undefined>();
const hiddenFile = ref();

const editorLoaded = (value: any) => {
  console.log("🚀 ~ file: app.vue:23 ~ editorLoaded ~ value", value);
  editor.value = value;

  // load up design after the editor gets loaded
  editor.value?.loadDesign(JSON.parse(JSON.stringify(sample)));
};

const saveDesign = () => {
  editor.value?.saveDesign((design: any) => {
    console.log(
      "🚀 ~ file: app.vue:31 ~ editor.value.saveDesign ~ design",
      design
    );
  });
};

const importDesign = (e: any) => {
  if (!e) return;
  const file = e.target.files[0];
  if (!file.type.includes("json")) return;
  const reader = new FileReader();

  reader.onload = function (readVal) {
    //@ts-ignore
    editor.value?.loadDesign(JSON.parse(readVal.target?.result));
  };
  reader.readAsText(file);
};
const exportHTML = () => {
  editor.value?.exportHtml((data: any) => {
    const json = data.design; // design json
    console.log("🚀 ~ file: app.vue:40 ~ editor.value.exportHtml ~ json", json);
    const html = data.html; // final html
    console.log("🚀 ~ file: app.vue:42 ~ editor.value.exportHtml ~ html", html);
  });
};
</script>

Screenshot of playground

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