nuxt-unlayer
v0.0.7
Published
Module used to add the Unlayer email builder to your Nuxt 3 app.
Downloads
80
Maintainers
Readme
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
- Add
nuxt-unlayer
dependency to your project
# Using yarn
yarn add --dev nuxt-unlayer
# Using npm
npm install --save-dev nuxt-unlayer
- Add
nuxt-unlayer
to themodules
section ofnuxt.config.ts
export default defineNuxtConfig({
modules: ["nuxt-unlayer"],
});
That's it! You can now use Nuxt Unlayer in your Nuxt app ✨
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