{"id":20773582,"url":"https://github.com/baybreezy/nuxt-unlayer","last_synced_at":"2025-07-22T17:34:03.109Z","repository":{"id":65626758,"uuid":"595799217","full_name":"BayBreezy/nuxt-unlayer","owner":"BayBreezy","description":"Add the Unlayer Editor to your Nuxt 3 app easily.","archived":false,"fork":false,"pushed_at":"2025-02-09T11:43:29.000Z","size":1655,"stargazers_count":3,"open_issues_count":6,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-02T09:11:00.941Z","etag":null,"topics":["email-editor","nuxt","ui-thing","unlayer"],"latest_commit_sha":null,"homepage":"https://nuxt-unlayer.behonbaker.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BayBreezy.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-31T20:44:26.000Z","updated_at":"2025-06-19T07:50:51.000Z","dependencies_parsed_at":"2024-08-30T01:02:11.460Z","dependency_job_id":"36f6e067-aa08-4ab2-b7f0-9b2e66853cf8","html_url":"https://github.com/BayBreezy/nuxt-unlayer","commit_stats":{"total_commits":69,"total_committers":3,"mean_commits":23.0,"dds":0.4347826086956522,"last_synced_commit":"c76bc6333b86da1bae0317592c6e9ab25621679b"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"purl":"pkg:github/BayBreezy/nuxt-unlayer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BayBreezy%2Fnuxt-unlayer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BayBreezy%2Fnuxt-unlayer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BayBreezy%2Fnuxt-unlayer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BayBreezy%2Fnuxt-unlayer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BayBreezy","download_url":"https://codeload.github.com/BayBreezy/nuxt-unlayer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BayBreezy%2Fnuxt-unlayer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266539584,"owners_count":23945049,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-22T02:00:09.085Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["email-editor","nuxt","ui-thing","unlayer"],"created_at":"2024-11-17T12:26:20.070Z","updated_at":"2025-07-22T17:34:03.061Z","avatar_url":"https://github.com/BayBreezy.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/People%20with%20professions/Artist%20Medium%20Skin%20Tone.png\" alt=\"Artist Medium Skin Tone\" width=\"35\" height=\"35\" /\u003e Nuxt Unlayer\n\n\u003c!-- automd:badges color=\"green\" license github=\"baybreezy/nuxt-unlayer\" provider=\"shields\" name=\"nuxt-unlayer\" codecov packagephobia --\u003e\n\n[![npm version](https://img.shields.io/npm/v/nuxt-unlayer?color=green)](https://npmjs.com/package/nuxt-unlayer)\n[![npm downloads](https://img.shields.io/npm/dm/nuxt-unlayer?color=green)](https://npm.chart.dev/nuxt-unlayer)\n[![codecov](https://img.shields.io/codecov/c/gh/baybreezy/nuxt-unlayer?color=green)](https://codecov.io/gh/baybreezy/nuxt-unlayer)\n[![license](https://img.shields.io/github/license/baybreezy/nuxt-unlayer?color=green)](https://github.com/baybreezy/nuxt-unlayer/blob/main/LICENSE)\n\n\u003c!-- /automd --\u003e\n\n![Demo Image](./playground/public/image.jpg)\n\n- [ Nuxt Unlayer](#-nuxt-unlayer)\n  - [ Demo](#-demo)\n  - [ Quick Setup](#-quick-setup)\n  - [ Full Example](#-full-example)\n  - [ Screenshot](#-screenshot)\n  - [Development](#development)\n  - [Contributors](#contributors)\n\n## \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Roller%20Coaster.png\" alt=\"Roller Coaster\" width=\"25\" height=\"25\" /\u003e Demo\n\nThe Demo is available at [Nuxt Unlayer Playground](https://nuxt-unlayer.behonbaker.com/)\n\n## \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Milky%20Way.png\" alt=\"Milky Way\" width=\"25\" height=\"25\" /\u003e Quick Setup\n\n1. Add `nuxt-unlayer` dependency to your project\n\n\u003c!-- automd:pm-install name=\"nuxt-unlayer\" separate --\u003e\n\n```sh\n# ✨ Auto-detect\nnpx nypm install nuxt-unlayer\n```\n\n```sh\n# npm\nnpm install nuxt-unlayer\n```\n\n```sh\n# yarn\nyarn add nuxt-unlayer\n```\n\n```sh\n# pnpm\npnpm install nuxt-unlayer\n```\n\n```sh\n# bun\nbun install nuxt-unlayer\n```\n\n```sh\n# deno\ndeno install nuxt-unlayer\n```\n\n\u003c!-- /automd --\u003e\n\n1. Add `nuxt-unlayer` to the `modules` section of `nuxt.config.ts`\n\n```js\nexport default defineNuxtConfig({\n  modules: [\"nuxt-unlayer\"],\n});\n```\n\nThat's it! You can now use Nuxt Unlayer in your Nuxt app ✨\n\n## \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Rocket.png\" alt=\"Rocket\" width=\"25\" height=\"25\" /\u003e Full Example\n\n\u003cdetails\u003e\n\u003csummary\u003eFull Example\u003c/summary\u003e\n\n\u003c!-- automd:file src=\"./playground/app/app.vue\" lang=\"vue\" code --\u003e\n\n```vue [app.vue]\n\u003ctemplate\u003e\n  \u003cmain class=\"main\"\u003e\n    \u003cUiNavbar sticky\u003e\n      \u003cdiv class=\"flex h-16 max-w-screen-2xl items-center justify-between px-5\"\u003e\n        \u003ch1 class=\"text-lg font-semibold tracking-tight\"\u003eNuxt Unlayer\u003c/h1\u003e\n        \u003cdiv v-if=\"editor\" class=\"flex items-center gap-2\"\u003e\n          \u003cUiButton variant=\"outline\" size=\"sm\" @click=\"exportHTML\"\u003eExport HTML\u003c/UiButton\u003e\n          \u003cUiButton variant=\"outline\" @click=\"hiddenFile.click()\"\u003eImport Design\u003c/UiButton\u003e\n          \u003cUiButton class=\"btn\" @click=\"saveDesign\"\u003eSave Design\u003c/UiButton\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/UiNavbar\u003e\n    \u003csection class=\"h-[calc(100dvh-65px)]\"\u003e\n      \u003cClientOnly\u003e\n        \u003cEmailEditor\n          display-mode=\"email\"\n          :appearance=\"{\n            theme: 'dark',\n          }\"\n          @ready=\"editorLoaded\"\n        /\u003e\n      \u003c/ClientOnly\u003e\n    \u003c/section\u003e\n  \u003c/main\u003e\n  \u003c!-- eslint-disable-next-line vue/html-self-closing --\u003e\n  \u003cinput ref=\"hiddenFile\" type=\"file\" hidden accept=\".json\" @change=\"importDesign\" /\u003e\n  \u003cUiVueSonner /\u003e\n\u003c/template\u003e\n\n\u003cscript setup lang=\"ts\"\u003e\n  import sample from \"@@/sample.json\";\n  import type { EditorInstance } from \"#unlayer/props\";\n\n  useHead({ title: \"Nuxt - Unlayer\" });\n  const colorMode = useColorMode();\n\n  const editor = shallowRef\u003cEditorInstance | null | undefined\u003e();\n  const hiddenFile = ref();\n\n  const editorLoaded = (value: any) =\u003e {\n    console.log(\"🚀 ~ file: app.vue:23 ~ editorLoaded ~ value\", value);\n    editor.value = value;\n\n    // load up design after the editor gets loaded\n    editor.value?.loadDesign(JSON.parse(JSON.stringify(sample)));\n    useSonner.success(\"Editor Loaded\", {\n      duration: 2000,\n      description: \"You can now start designing your email template\",\n    });\n  };\n\n  const saveDesign = () =\u003e {\n    editor.value?.saveDesign((design: any) =\u003e {\n      useSonner.success(\"Design Saved\", {\n        duration: 2000,\n        description:\n          \"Your design has been saved successfully. CHeck the console for the design object\",\n      });\n      console.log(\"🚀 ~ file: app.vue:31 ~ editor.value.saveDesign ~ design\", design);\n    });\n  };\n\n  const importDesign = (e: any) =\u003e {\n    if (!e) return;\n    const file = e.target.files[0];\n    if (!file.type.includes(\"json\")) return;\n    const reader = new FileReader();\n\n    reader.onload = function (readVal) {\n      const result = readVal.target?.result;\n      if (typeof result === \"string\") {\n        editor.value?.loadDesign(JSON.parse(result));\n        useSonner.success(\"Design Imported\", {\n          duration: 2000,\n          description: \"Your design has been imported successfully\",\n        });\n      }\n    };\n    reader.readAsText(file);\n  };\n  const exportHTML = () =\u003e {\n    editor.value?.exportHtml((data: any) =\u003e {\n      const json = data.design; // design json\n      console.log(\"🚀 ~ file: app.vue:40 ~ editor.value.exportHtml ~ json\", json);\n      const html = data.html; // final html\n      console.log(\"🚀 ~ file: app.vue:42 ~ editor.value.exportHtml ~ html\", html);\n      useSonner.success(\"HTML Exported\", {\n        duration: 2000,\n        description: \"Your design has been exported successfully. Check the console for the HTML\",\n      });\n    });\n  };\n\n  const title = \"Nuxt Unlayer\";\n  const description = \"Easily add unlayer to your Nuxt application\";\n  const image = \"/image.jpg\";\n  const url = \"https://nuxt-unlayer.behonbaker.com\";\n  useSeoMeta({\n    description,\n    ogTitle: title,\n    ogDescription: description,\n    ogImage: image,\n    twitterTitle: title,\n    ogUrl: url,\n    twitterDescription: description,\n    twitterImage: image,\n    twitterCard: \"summary_large_image\",\n  });\n\n  useHead({\n    htmlAttrs: {\n      lang: \"en\",\n    },\n    link: [\n      {\n        rel: \"icon\",\n        type: \"image/png\",\n        href: \"/UnlayerIcon.png\",\n      },\n    ],\n  });\n\u003c/script\u003e\n\n```\n\n\u003c!-- /automd --\u003e\n\n\u003c/details\u003e\n\n## \u003cimg src=\"https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Camera%20with%20Flash.png\" alt=\"Camera with Flash\" width=\"25\" height=\"25\" /\u003e Screenshot\n\n\u003cimg src=\"./playground/public/image.jpg\" style=\"\"/\u003e\n\n## Development\n\n```bash\n# Install dependencies\nnpm install\n\n# Generate type stubs\nnpm run dev:prepare\n\n# Develop with the playground\nnpm run dev\n\n# Build the playground\nnpm run dev:build\n\n# Run ESLint\nnpm run lint\n\n# Run Vitest\nnpm run test\nnpm run test:watch\n\n# Release new version\nnpm run release\n```\n\n## Contributors\n\nPublished under the [MIT](https://github.com/baybreezy/nuxt-unlayer/blob/main/LICENSE) license.\nMade by [@BayBreezy](https://github.com/BayBreezy) with ❤️\n\n\u003ca href=\"https://github.com/baybreezy/nuxt-unlayer/graphs/contributors\"\u003e\n\u003cimg src=\"https://contrib.rocks/image?repo=baybreezy/nuxt-unlayer\" /\u003e\n\u003c/a\u003e\n\n\u003c!-- automd:with-automd lastUpdate --\u003e\n\n---\n\n_🤖 auto updated with [automd](https://automd.unjs.io) (last updated: Mon Oct 21 2024)_\n\n\u003c!-- /automd --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbaybreezy%2Fnuxt-unlayer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbaybreezy%2Fnuxt-unlayer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbaybreezy%2Fnuxt-unlayer/lists"}