Integrasi Vue 3 + Vite + Unlayer

yarn create vite

pnpm create vite

Seperti ini kira-kira struktur file dan folder yang dibuat dengan vue 3 dan 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.

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.

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.

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.