> ## Content Index
> Fetch the complete content index at: https://debug.my.id/llms.txt
> Use this file to discover other available public pages before exploring further.

# Integrasi Vue 3 + Vite + Unlayer
- URL: https://debug.my.id/integrasi-vue-3-unlayer-bagian-1/
- Published: 2025-01-22T05:58:00.000Z
- Updated: 2025-06-25T22:22:02.000Z
- Description: Artikel ini berisi tutorial singkat tentang bagaimana cara mengintegrasikan Unlayer.js dengan Vue 3 + Vite
- Author: Tukang Debug
- Tags: Tutorial, Vue 3, JavaScript

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**](https://debug.my.id/integrasi-vue-3-unlayer-bagian-1/) ke dalam aplikasi yang dibuat dengan mengunakan **Vue 3** dan **Vite**.

## 0\. Persiapan

Seperti di sebutkan 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 buat project terlebih dengan menggunakan perintah sebagai berikut:

Menggunakan **npm**

```javascript
npm init vite@latest
```

Menggunakan **yarn**

```bash
yarn create vite
```

Menggunakan **pnpm**

```bash
pnpm create vite
```

![Integrasi Vue 3 + Vite + Unlayer](https://debug.my.id/content/images/2025/06/image-163.png)

Membuat project baru dengan yarn

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

![Integrasi Vue 3 + Vite + Unlayer](https://debug.my.id/content/images/2025/06/image-164.png)

## 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.

```javascript
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.

```javascript
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.

![Integrasi Vue 3 + Vite + Unlayer](https://debug.my.id/content/images/2025/06/image-165.png)

Isi dari komponen tersebut adalah sebagai berikut.

```javascript
<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**](https://v3.vuejs.org/api/sfc-spec.html?ref=debug.my.id#intro).

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

```javascript
<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**.

```javascript
<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.

```javascript
...
// 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.

```javascript
...
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.

```javascript
<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.

```javascript
<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.

![Integrasi Vue 3 + Vite + Unlayer](https://debug.my.id/content/images/2025/06/image-166.png)

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 bisa dilakukan dengan beberapa cara. 

Salah satunya adalah dengan menggunakan selector **id** yang mengandung kata **unlayer\_** . Silahkan buka kembali file UnlayerEditor.vue, kemudian tambahkan style sebagai berikut.

```javascript
...
<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 lagi 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**.

```javascript
...
<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>
```

Berikut ini tampilan hasil perbaikan-nya. 

![Integrasi Vue 3 + Vite + Unlayer](https://debug.my.id/content/images/2025/06/image-167.png)

Sampai di sini 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.