https://github.com/baybreezy/nuxt-unlayer
Add the Unlayer Editor to your Nuxt 3 app easily.
https://github.com/baybreezy/nuxt-unlayer
email-editor nuxt ui-thing unlayer
Last synced: 19 days ago
JSON representation
Add the Unlayer Editor to your Nuxt 3 app easily.
- Host: GitHub
- URL: https://github.com/baybreezy/nuxt-unlayer
- Owner: BayBreezy
- License: mit
- Created: 2023-01-31T20:44:26.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-11-11T18:05:18.000Z (6 months ago)
- Last Synced: 2024-11-13T09:49:45.957Z (6 months ago)
- Topics: email-editor, nuxt, ui-thing, unlayer
- Language: TypeScript
- Homepage: https://nuxt-unlayer.behonbaker.com/
- Size: 1.92 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# 
Nuxt Unlayer
[](https://npmjs.com/package/nuxt-unlayer)
[](https://npm.chart.dev/nuxt-unlayer)
[](https://codecov.io/gh/baybreezy/nuxt-unlayer)
[](https://github.com/baybreezy/nuxt-unlayer/blob/main/LICENSE)
- [ Nuxt Unlayer](#-nuxt-unlayer)
- [ Demo](#-demo)
- [ Quick Setup](#-quick-setup)
- [ Full Example](#-full-example)
- [ Screenshot](#-screenshot)
- [Development](#development)
- [Contributors](#contributors)
## 
Demo
The Demo is available at [Nuxt Unlayer Playground](https://nuxt-unlayer.behonbaker.com/)
## 
Quick Setup
1. Add `nuxt-unlayer` dependency to your project
```sh
# ✨ Auto-detect
npx nypm install nuxt-unlayer
```
```sh
# npm
npm install nuxt-unlayer
```
```sh
# yarn
yarn add nuxt-unlayer
```
```sh
# pnpm
pnpm install nuxt-unlayer
```
```sh
# bun
bun install nuxt-unlayer
```
```sh
# deno
deno install nuxt-unlayer
```
1. Add `nuxt-unlayer` to the `modules` section of `nuxt.config.ts`
```js
export default defineNuxtConfig({
modules: ["nuxt-unlayer"],
});
```
That's it! You can now use Nuxt Unlayer in your Nuxt app ✨
## 
Full Example
Full Example
```vue [app.vue]
Nuxt Unlayer
Export HTML
Import Design
Save Design
import sample from "@@/sample.json";
import type { EditorInstance } from "#unlayer/props";
useHead({ title: "Nuxt - Unlayer" });
const colorMode = useColorMode();
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)));
useSonner.success("Editor Loaded", {
duration: 2000,
description: "You can now start designing your email template",
});
};
const saveDesign = () => {
editor.value?.saveDesign((design: any) => {
useSonner.success("Design Saved", {
duration: 2000,
description:
"Your design has been saved successfully. CHeck the console for the design object",
});
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) {
const result = readVal.target?.result;
if (typeof result === "string") {
editor.value?.loadDesign(JSON.parse(result));
useSonner.success("Design Imported", {
duration: 2000,
description: "Your design has been imported successfully",
});
}
};
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);
useSonner.success("HTML Exported", {
duration: 2000,
description: "Your design has been exported successfully. Check the console for the HTML",
});
});
};
const title = "Nuxt Unlayer";
const description = "Easily add unlayer to your Nuxt application";
const image = "/image.jpg";
const url = "https://nuxt-unlayer.behonbaker.com";
useSeoMeta({
description,
ogTitle: title,
ogDescription: description,
ogImage: image,
twitterTitle: title,
ogUrl: url,
twitterDescription: description,
twitterImage: image,
twitterCard: "summary_large_image",
});
useHead({
htmlAttrs: {
lang: "en",
},
link: [
{
rel: "icon",
type: "image/png",
href: "/UnlayerIcon.png",
},
],
});
```
## 
Screenshot
## Development
```bash
# 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
```
## Contributors
Published under the [MIT](https://github.com/baybreezy/nuxt-unlayer/blob/main/LICENSE) license.
Made by [@BayBreezy](https://github.com/BayBreezy) with ❤️
---
_🤖 auto updated with [automd](https://automd.unjs.io) (last updated: Mon Oct 21 2024)_