Vue 3 not supported. #57
Comments
|
https://github.com/Tofandel/vue-unlayer Much cleaner, vue 3 only |
|
@Tofandel can't get your package to work |
|
@Tofandel Poorly the package is not installable. |
|
Forgot to publish it, now it's good |
|
When installing Use this instead |
I get this error when I try to use this in Nuxt 3.. If I try to call a function I get Any suggestions? |
|
I get the same error when I use const editor = ref(null);for the v-model. If I use const editor = shallowRef(null);the error disappears. |
Are you able to navigate away from the page and back without getting an error? If I navigate to a different page and then go back to the editor, I get the error |
|
I use it inside <ClientOnly>
<div class="w-full">
<EmailEditor
:appearance="{theme: 'dark'}"
v-model:editor="editor"
@load="editorLoaded"
@ready="editorReady"
/>
</div>
</ClientOnly>But I have another navigation issue when I navigate away and back. I get following error, and the editor isn't loading: |
|
I found a fix.. just assign an editorId to the component... |
|
I switch back to basics const editor = ref(null);
const editorSave = () => {
console.log(editor.value.html);
};
watch(editor, (val, oldVal) => {
console.log('unlayer-editor', val);
}, {deep: true})
onMounted(() => {
if(process.client && !document.getElementById('unlayer-embed')) {
const s = document.createElement('script');
s.src = '//editor.unlayer.com/embed.js';
s.id = 'unlayer-embed';
s.type = 'text/javascript';
s.async = true;
s.addEventListener('load', () => {
const e = unlayer.createEditor({
options: {},
appearance: {
theme: 'dark'
},
id: 'unlayer-editor',
displayMode: 'email'
})
e.addEventListener('design:updated', () => {
e.exportHtml((ctx) => {
editor.value = {...ctx}
});
});
}, false)
document.body.appendChild(s);
}
});it works fine in my environment. Even if I navigate back and forth. |
At which location does something have to be inserted? Do you have an example code? |
|
Will re-create a repo and share it soon |
|
Any updates @BayBreezy ? |
|
Hey @Jensxy <EmailEditor
:options="options"
:appearance="appearance"
minHeight="100%"
style="height: 100%"
editorId="1"
ref="emailEditorRef"
/>The entire file that i have is below Click to view<template>
<div>
<header class="border-b dark:border-gray-800/50">
<div class="mx-auto flex h-16 max-w-7xl items-center justify-between px-5">
<NuxtLink class="font-bold" to="/">Designer</NuxtLink>
<div class="flex items-center justify-center gap-5">
<button @click="hiddenPicker.click()" class="btn text-xs">Import Design</button>
<button @click="saveDesign()" class="btn text-xs">Save Design</button>
<button @click="exportHtml()" class="btn text-xs">Export Design</button>
</div>
</div>
</header>
<main class="h-[calc(100vh-65px)]">
<EmailEditor
:options="options"
:appearance="appearance"
minHeight="100%"
style="height: 100%"
editorId="1"
ref="emailEditorRef"
/>
</main>
<input
type="file"
ref="hiddenPicker"
hidden
accept=".json"
@change="importDesign"
@click="clearInput"
/>
</div>
</template>
<script setup lang="ts">
//@ts-ignore
import { EmailEditor } from "vue-email-editor";
import colors from "tailwindcss/colors";
import { ExportHtml, SaveDesign } from "~/types";
// ref of the email editor
const emailEditorRef = ref();
// ref of hiiden input
const hiddenPicker = ref();
const { isDark } = useTheme();
// Method used to save a design
function saveDesign() {
emailEditorRef.value?.editor.saveDesign((design: SaveDesign) => {
console.log("saveDesign", design);
});
}
// Method used to export a design
function exportHtml() {
emailEditorRef.value?.editor.exportHtml((data: ExportHtml) => {
console.log("exportHtml", data);
});
}
// Method used to import a design
function importDesign() {
const file = hiddenPicker.value.files[0];
if (!file) return;
if (file.type !== "application/json") return;
const reader = new FileReader();
reader.onload = (e) => {
const result = e.target?.result;
if (result) {
emailEditorRef.value?.editor.loadDesign(JSON.parse(result.toString()));
}
};
reader.readAsText(file);
}
// Method used to clear the input
function clearInput() {
hiddenPicker.value.value = "";
}
const options = {
fonts: {
showDefaultFonts: false,
},
features: {
colorPicker: {
presets: [
"#fff",
"#000",
colors.gray[700],
colors.teal[500],
colors.red[500],
colors.yellow[500],
colors.green[500],
colors.blue[500],
colors.indigo[500],
colors.purple[500],
colors.pink[500],
],
},
},
};
const appearance = computed(() => {
return {
theme: isDark ? "dark" : "light",
};
});
</script>
|
|
I am running into this issue as well when using with Nuxt 3. I am also getting weird 502 errors with the API call that is made from within the library to https://api.events.unlayer.com/usage. Is this library still actively supported? Appears there are multiple open issues getting little to no attention |
|
Hello @AmareshKulkarni , I got this workign in Nuxt 3. You can check out the repo here: https://github.com/BayBreezy/templates. This is a link to the live website: https://templates.behonbaker.com/ Check this file to see how I got the editor to work: https://github.com/BayBreezy/templates/blob/main/pages/editor.vue |
@BayBreezy Thank you so much for the reference provided. Though my issue is not resolved, It did help me narrow down the problem, t appears if I directly navigate to the page using http://localhost:3000/editor it works fine. However if I navigate to that route by clicking on a link, it doesn't seem to work.Not sure what the issue is but definitely helps zoom in on the routing issue. It could be something to do with my routing logic. The error message really throwing me off. |
|
@AmareshKulkarni I had that same issue at one point. The key was to set the editorId value to 1 if the ID from the loaded design is undefined |
In my case, I literally copied the relevant parts of editor.vue, which had the editorId, but I still get that error. I am able to produce the issue with routing. I will post what I find. |
|
@AmareshKulkarni ooohhh.. dang.. well, let me know what you come up with |
Also the other thing is the APIs that get called in a successful scenario,
don't get called when I run in to error. I wonder if there are any fetch related issues because my application is already using fetch and if there is a conflict somehow. I confirm it is also not related to routing logic, because I tried with navigateTo({name:'editor'}) in the code base that you shared, and it was working flawlessly. When it fails, here is the dom tree that I see:
|
|
Very strange issue that I can not explain why, but here is what was happening... I had transitions enabled in my Nuxt app globally.. So, when I was transitioning from page to page, the issue - " Could not find a valid element for given id or className. " was showing up. I was not running into this issue when I was directly navigating to a page with Editor, as the transitions were not kicking in. I disabled transitions, the editor was successfully loaded. It worked without the editorId being passed. I will have to see if there is a way to disable transition for this one page. I still have errors in my console for 502 errors: `Access to fetch at 'https://api.events.unlayer.com/save' from origin 'https://editor.unlayer.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. (anonymous) @ editor.js:2 |
Finally it was fixed today. |
Can you please add vue 3 support?
The text was updated successfully, but these errors were encountered: