Sinau Coding
Berbincang santai perihal pemrograman
Tukang ketik yang sedang belajar pemrograman
5:58 PM

Integrasi Vue 3 + Vite + Unlayer

Vue 3 + Vite + Unlayer

Artikel ini berisi tutorial singkat tentang bagaimana cara mengintegrasikan Unlayer.js dengan Vue 3 + Vite.

Unlayer adalah sebuah layanan yang menyediakan layanan drag drop email/landing page builder. Email builder dari Unlayer ini bisa diakses secara online maupun diembed ke dalam aplikasi lain. Dan yang paling menarik adalah Unlayer ini bisa digunakan secara gratis maupun berbayar.

Pada tutorial kali ini, kita akan mencoba untuk mengintegrasikan atau lebih tepatnya meng-embed Unlayer ke dalam aplikasi yang dibuat dengan mengunakan Vue 3 dan Vite.

0. Persiapan

Seperti di sebuatkan di atas, tutorial ini menggunakan Vue 3 dan Vite, meski tidak menutup kemungkinan jika Anda menggunakan selain itu, tutorial ini akan tetap bisa diikuti, tentu saja dengan beberapa perubahan.

Pastikan Anda sudah menginstall node.js dan jika Anda belum membuat project, maka silahkan Anda membuat project dengan menggunakan perintah sebagai berikut:

Menggunakan npm

npm init vite@latest
Menggunakan yarn
yarn create vite
Menggunakan pnpm
pnpm create vite

Create new project

Seperti ini kira-kira struktur file dan folder yang dibuat dengan vue 3 dan vite.

Struktur file dan filder project vue 3 + vite

1. Membuat script untuk meng-embed Unlayer

Selanjutnya kita akan membuat sejenis script loader yang gunanya untuk meng-embded editor script Unlayer secara dinamis ke dalam html. Oleh karena itu, silahkan buat file misalkan dengan mana script-loader.js di dalam folder src, yang isinya kurang lebih seperti kode di bawah ini.

import { ref, computed } from "vue";

const scriptUrl = "//editor.unlayer.com/embed.js?2";

// flag apakah script unlayer sedang dalam proses load
const isLoading = ref(false);
// flag apakah script unlayer sudah diload
const isLoaded = ref(false);
// id otomatis untuk nantinya digunakan untuk meng-embed editor unlayer
const lastEditorId = ref(0);

let embedScript = null;

export const useUnlayer = () => ({
  isLoaded: computed(() => isLoaded.value),
  isLoading: computed(() => isLoading.value),
  lastEditorId: computed(() => lastEditorId.value)
});

export const getNextEditorId = () => `unlayer_${++lastEditorId.value}`;

export function loadScript() {
  // return promise
  return new Promise((resolve) => {
    // jika sudah loaded, maka just return
    if (isLoaded.value) {
      resolve();
    } else if (isLoading.value) {
      embedScript.addEventListener("load", () => {
        resolve();
      });
    } else {
      isLoading.value = true;
      // load script and wait for loaded
      embedScript = document.createElement("script");
      embedScript.setAttribute("src", scriptUrl);
      embedScript.addEventListener("load", () => {
        isLoaded.value = true;
        isLoading.value = false;
        resolve();
      });
      document.head.appendChild(embedScript);
    }
  });
}

Inti dari script-loader.js ini adalah meng-inject script //editor.unlayer.com/embed.js ke dalam header html, dimana script embed.js ini diperlukan untuk meng-embed editor dari Unlayer. Fungsi loadScript ini akan mengembalikan Promise, sehingga akan mempermudah pada waktu nanti dipanggil. Yaitu cukup dengan await atau dengan promise then.

Selain meng-export fungsi loadScript, script-loader.js di atas juga meng-export status loading di dalam fungsi useUnlayer. Fungsi useUnlayer ini akan mengembalikan variable-variable status loading yang readonly, beserta fungsi getNextEditorId untuk membuat id untuk meng-embed editor.


export const useUnlayer = () => ({
  isLoaded: computed(() => isLoaded.value),
  isLoading: computed(() => isLoading.value),
  lastEditorId: computed(() => lastEditorId.value)
});

export const getNextEditorId = () => `unlayer_${++lastEditorId.value}`;

2. Membuat Vue componen wrapper untuk Unlayer

Selanjutnya kita akan membuat komponen dimana di dalamnya akan di-embed editor Unlayer. Silahkan buat komponen misalkan dengan nama UnlayerEditor.vue di dalam folder components, atau dimanapun yang Anda inginkan.

Membuat file UnlayerEditor.vue

Isi dari komponen tersebut adalah sebagai berikut.

<script setup>
import { onMounted } from "vue";
import { loadScript, getNextEditorId, useUnlayer } from "../script-loader";
const { isLoaded, isLoading } = useUnlayer();
// get last editor id
const editorId = getNextEditorId();
// variable untuk menyimpan instance editor
let editor = null;
// on mount load editor unlayer
onMounted(async () => {
  await loadScript();
  // create new editor
  const opt = {
    id: editorId,
  };
  // unlayer adalah global object yang dibuat oleh embed.js
  editor = unlayer.createEditor(opt);
});
</script>

<template>
  <div v-if="isLoading">
    <span>Loading...</span>
  </div>
  <div v-else :id="editorId"></div>
</template>

<style>
div[id^="unlayer_"] {
  height: 100%;
}
</style>

Komponen UnlayerEditor ini kita buat dengan struktur FSC seperti yang direkomendasikan di dalam dokumentasi Vue.js. Untuk informasi lebih lanjut perihal FSC ini, silahkan menuju tautan ini : Vue 3 FSC.

Mulai dari paling atas, penjelasan-nya kurang lebih adalah sebagai berikut.

<script setup>
import { onMounted } from "vue";
...

Pada kode di atas, kita meng-import onMounted karena Unlayer editor ini harus di-embed setelah DOM dari komponen UnlayerEditor tersebut "terpasang". Oleh karena itu nantinya proses meng-embed ini dilakukan pada waktu onMounted.

<script setup>
...
import { loadScript, getNextEditorId, useUnlayer } from "../script-loader";
const { isLoaded, isLoading } = useUnlayer();
// get last editor id
const editorId = getNextEditorId();
...

Selanjutnya kita meng-import fungsi loadScript dan useUnlayer dari script-loader.js yang kita buat sebelumnya. Setelah itu, jalankan fungsi useLayer untuk mendapatkan status loading dari script. Dan jalankan fungsi getNextEditorId untuk mendapatkan id untuk kita gunakan untuk meng-embed Unlayer editor.

...
// variable untuk menyimpan instance editor
let editor = null;
// on mount load editor unlayer
onMounted(async () => {
    await loadScript();
    // create new editor
    const opt = {
        id: editorId,
    };

    editor = unlayer.createEditor(opt);
});
</script>

Selanjutnya, kita buat fungsi di dalam event onMounted, dimana akan dijalankan fungsi loadScript. Fungsi loadScript ini karena menghasilkan Promise, maka bisa Anda panggil dengan async await seperti contoh di atas, atau dengan menggunakan then seperti di bawah ini.

...
let editor = null;
// on mount load editor unlayer
onMounted( () => {
    loadScript()
    .then(()=>{
        // create new editor
        const opt = {
            id: editorId,
        };

        editor = unlayer.createEditor(opt);
    })
});
</script>

Perhatikan perbedaan pada waktu menggunakan await dan promise. Pada waktu menggunakan async, maka kita harus menambahkan async di dalam fungsi tersebut.

<template>
    <div v-if="isLoading">
        <span>Loading...</span>
    </div>
    <div v-else :id="editorId"></div>
</template>

Di dalam templete komponen ini, kita lakukan pengecekan apakah saat ini masih dalam proses loading script embed.js. Jika masih dalam proses, maka munculkan info Loading... , sedangkan jika sudah ter-load, maka baru tampilkan unlayer editor-nya.

3. Menggunakan komponen UnlayerEditor

Setelah kita membuat komponen UnlayerEditor, maka selanjutnya kita akan. menggunakan komponen tersebut. Kali ini, agar mudah, komponen UnlayerEditor ini akan langsung kita munculkan di dalam App. Oleh karena itu, silahkan buka file App.vue, kemudian silahkan modifikasi sebagai berikut.

<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import UnlayerEditor from './components/UnlayerEditor.vue';
</script>

<template>
  <UnlayerEditor/>
</template>

<style>
html, body, #app {
    height: 100%;
}
</style>

Di sini kita hanya meng-import komponen UnlayerEditor dan ditambahkan ke dalam template. Selain itu, style juga sudah dimodifikasi dengan harapan nantinya Unlayer editor ini bisa muncul sepenuh layar.

Silahkan jalankan project Anda (jika belum dengan perintah : yarn dev) untuk melihat hasilnya. Kira-kira hasilnya akan seperti gambar di bawah ini.

Hasil render

Hasilnya tampaknya. masih belum sesuai dengan harapan. Jangan khawatir, selanjutnya kita akan menyesuaikan style agar Unlayer editor tampil memenuhi layar.

4. Menyesuaikan style

Seperti tampak pada hasil di atas. Tampilan Unlayer editor masih tidak 1 layar penuh. Hal ini dikarenakan container dari Unlayer editor ini belum di setting tinggi-nya. Oleh karena itu perbaikan style lelanjutnya bisa dilakukan dengan banyak cara. Salah satunya adalah dengan menggunakan selector id yang mengandung kata unlayer_ . Silahkan buka kembali file UnlayerEditor.vue, kemudian tambahkan style sebagai berikut.

...
<template>
    <div v-if="isLoading">
        <span>Loading...</span>
    </div>
    <div v-else :id="editorId"></div>
</template>

<style>
    div[id^="unlayer_"]{
        height: 100%;
    }
</style>

Pada modifikasi style di atas, kita menggunakan selector div[id^="unlayer_"] karena memang id dari Unlayer editor yang kita buat menggunakan prefix unlayer_. Serhingga semua div yang id nya dimulai dengan kata unlayer_ maka height nya akan di set 100%. Untuk lebih jelasnya, silahkan Anda cek fungsi getNextEditorId dari script-loader.js di atas.

Alternatif lain adalah dengan menambahkan kelas khusus pada div kontainer dari Unlayer editor. Misalkan dengan nama kelas unlayer-editor.

...
<template>
    <div v-if="isLoading">
        <span>Loading...</span>
    </div>
    <div class="unlayer-editor" v-else :id="editorId"></div>
</template>

<style>
    .unlayer-editor {
        height: 100%;
    }
</style>

Silahkan perbaikan style ini Anda pilih yang paling Anda sesuai.

Maka hasil akhirnya akan tampak lebih baik seperti gambar di bawah ini.

Hasil akhir

Sampai di sini maka kita sudah berhasil meng-integrasikan Unlayer dengan Vue 3 dan Vite. Memang pada bagian pertama tutorial ini kita buat sangat sederhana. Dimana yang diutamakan adalah berhasil meng-embed Unlayer editor ke dalam aplikasi yang dibuat dengan menggunakan Vue 3 dengan struktur SFC.

Pada bagian selanjutnya kita akan mencoba menambahkan beberapa fitur dari Unlayer seperti custom block dan export html.

Sekian tutorial kali ini, selamat mencoba dan semoga yang sedikit ini bermanfaat.

Sumber:
SFC-Spec
Unlayer Sample
Dokumentasi Unlayer

Komentar

Load more

Terbaru

Membuat promise based Modal/Dialog dengan menggunakan Vue 3 dan Quasar
Artikel ini akan membahas salah satu cara mudah untuk membuat promise based komponen Modal/Dialog dengan Vue 3
Integrasi Vue 3 + Vite + Unlayer
Tutorial singkat tentang bagaimana cara mengintegrasikan Unlayer.js dengan Vue 3 + Vite dengan SFC
Cara install Postgresql di MacOS
Postgresql adalah salah satu object-relational database open source yang memiliki banyak fitur enterprise layaknya Or...
Cara install npm di Laravel
aravel adalah sebuah framework untuk webapp yang berbasis php, sedangkan npm adalah sebuah package manager untuk node...