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

# Cara install dan integrasi GrapesJS dengan Vue 2
- URL: https://debug.my.id/cara-install-dan-integrasi-grapesjs/
- Published: 2021-09-03T06:17:00.000Z
- Updated: 2025-06-28T13:26:35.000Z
- Description: Artikel ini berisi tutorial lengkap untuk melakukan integrasi GrapesJs dengan Vue 2
- Author: Tukang Debug
- Tags: Vue.js, Tip/trik

[**GrapesJS**](https://www.debug.my.id/2021/09/cara-install-dan-integrasi-grapesjs.html?ref=debug.my.id) adalah sebuah Web Builder Framework yang gratis dan opensource yang ditujukan untuk mempermudah pengguna dalam membuat template HTML tanpa pengetahuan coding sama sekali. GrapeJS ini juga dapat diintegrasikan ke dalam framework javascript lain seperti Angular, Reactjs atau Vue. Berikut ini adalah salah satu cara untuk[ **meng-install dan meng-integrasikan GrapesJS ke dalam Vue 2**](https://debug.my.id/cara-install-dan-integrasi-grapesjs/).

Sebelum lanjut, pastikan Anda sudah meng-install **node.js** yang secara otomatis sudah termasuk **npm**. Bisa juga Anda meng-install **yarn** sebagai alternatif lain dari **npm**.

### 0\. Menyiapkan project Vue 2

Jika Anda belum membuat project vue, maka silahkan buat terlebih dahulu, bisa dengan menggunakan **vue cli** atau dengan cara manual.

```bash
vue create test_grapesjs
```

![Cara install dan integrasi GrapesJS dengan Vue 2](https://debug.my.id/content/images/2025/06/image-117.png)

Silahkan buka project Vue Anda dengan menggunakan text editor. Jika Anda baru membuat project Vue dengan cli seperti contoh di atas, maka di bawah ini tampilan struktur project Anda.

![Cara install dan integrasi GrapesJS dengan Vue 2](https://debug.my.id/content/images/2025/06/image-118.png)

Silahkan buka komponen **App.vue** lalu hapus komponen-komponen dan css yang tidak diperlukan. Untuk contoh ini, kita tidak membutuhkan komponen HelloWorld dan css untuk id **#app**. Seperti ini kira-kira struktur akhir dari komponen **App.vue**.

![Cara install dan integrasi GrapesJS dengan Vue 2](https://debug.my.id/content/images/2025/06/image-119.png)

### 1\. Install/menambahkan GrapesJS

Dengan menggunakan Terminal kesayangan Anda, silahkan masuk ke dalam folder tempat project Anda berada. Kemudian jalankan perintah **yarn add grapesjs** jika Anda menggunakan **yarn** atau **npm i grapesjs** jika Anda menggunakan **npm**.

```bash
npm i grapesjs
```

```bash
yarn add grapesjs
```

![Cara install dan integrasi GrapesJS dengan Vue 2](https://debug.my.id/content/images/2025/06/image-120.png)

### 2\. Import GrapesJS

Setelah Anda meng-install **GrapesJS**, maka selanjutnya kita akan tambahkan GrapesJS ke dalam project dengan cara import langsung ke komponen **App.vue**.

> Anda bisa saja membuat komponen terpisah untuk GrapesJS ini, akan tetapi kali ini kita akan langsung menambahkan GrapesJS ke dalam **App.vue** karena lebih mudah dan sederhana.

Silahkan import GrapesJS beserta css nya seperti kode di bawah ini.

```javascript
<template>
  <div id="app">
  </div>
</template>

<script>
import grapesJS from "grapesjs";
import "grapesjs/dist/css/grapes.min.css";

export default {
  name: 'App',
}
</script>

<style>
</style>
```

### 3\. Render GrapesJS

Untuk me-render atau memasang GrapesJS, maka kita bisa menggunakan event **mounted** dari Vue. Silahkan tuliskan kode seperti di bawah ini di dalam event **mounted**.

```javascript
export default {
    name: "App",
    mounted() {
        grapesJS.init({
            showOffsets: 1,
            fromElement: 1,
            container: "#app",
            height: "100%",
            avoidInlineStyle: false,
            plugins: [],
            pluginsOpts: {
            },
        });
    },
};
```

Yang perlu diperhatikan di sini adalah pada property **container**. Untuk contoh ini diisi dengan **#app** dikarenakan editor GrapesJS ini akan ditempelkan pada **<div id="app">**. Silahkan sesuaikan dengan id dari div yang Anda gunakan.

Sampai disini, silahkan coba jalankan aplikasi ini dengan menggunakan perintah **yarn serve**.

```bash
yarn serve
```

![Cara install dan integrasi GrapesJS dengan Vue 2](https://debug.my.id/content/images/2025/06/image-121.png)

Untuk melihat hasilnya, silahkan buka Browser kemudian tuliskan alamat yang tertera pada hasil **yarn serve** pada bagian **Local**. Untuk contoh di atas pada alamat **localhost:8082**. Bisa jadi ini berbeda dengan milik Anda.

![Cara install dan integrasi GrapesJS dengan Vue 2](https://debug.my.id/content/images/2025/06/image-122.png)

Tampak hasilnya kurang begitu sesuai. Hal ini karena kita masih harus melakukan beberapa penyesuaian style.

### 4\. Penyesuaian style

Untuk memperbaiki tampilan editor GrapesJS di atas, maka silahkan tambahkan style berikut ini di bagian bawah dari **App.vue**.

```javascript
<template>
    <div id="app"></div>
</template>

<script>
    import grapesJS from "grapesjs";
    import "grapesjs/dist/css/grapes.min.css";

    export default {
        name: "App",
        mounted() {
            grapesJS.init({
                showOffsets: 1,
                fromElement: 1,
                container: "#app",
                height: "100%",
                avoidInlineStyle: false,
                plugins: [],
                pluginsOpts: {},
            });
        },
    };
</script>

<style>
    body,
    html {
        height: 100%;
        margin: 0;
    }
</style>
```

Maka hasilnya akan menjadi lebih baik.

![Cara install dan integrasi GrapesJS dengan Vue 2](https://debug.my.id/content/images/2025/06/image-123.png)

### 5\. Menambahkan Preset

Jika Anda perhatikan hasil di atas, maka tampak editor GrapesJS tersebut masih kosong dari toolbox (komponen drag drop masih kosong). Hal ini dikarenakan kita belum menambahkan **preset** ke dalam GrapesJS. **Preset** ini sederhananya adalah kumpulan setting dan komponen untuk membangun editor GrapesJS. Berikut ini adalah beberapa **preset** yang sudah disediakan oleh GrapesJS.

- [grapesjs-preset-webpage - Webpage Builder](https://github.com/artf/grapesjs-preset-webpage?ref=debug.my.id)
- [grapesjs-preset-newsletter - Newsletter Builder](https://github.com/artf/grapesjs-preset-newsletter?ref=debug.my.id)
- [grapesjs-mjml - Newsletter Builder with MJML components](https://github.com/artf/grapesjs-mjml?ref=debug.my.id)

Untuk kali ini, kita akan mencoba menggunakan preset untuk **Webpage Builder**. Silahkan tambahkan package **grapesjs-preset-webpage** ke dalam project dengan menggunakan perintah **yarn** di bawah ini.

```bash
yarn add grapesjs-preset-webpage
```

atau dengan **npm**.

```bash
npm i grapesjs-preset-webpage
```

![Cara install dan integrasi GrapesJS dengan Vue 2](https://debug.my.id/content/images/2025/06/image-124.png)

Kemudian tambahkan **grapesjs-preset-webpage** ke dalam GrapesJS sebagai berikut:

```bash
import grapesWEB from "grapesjs-preset-webpage";
import "grapesjs-preset-webpage/dist/grapesjs-preset-webpage.min.css";

export default {
    name: "App",
    mounted() {
        grapesJS.init({
            showOffsets: 1,
            fromElement: 1,
            container: "#app",
            height: "100%",
            avoidInlineStyle: false,
            plugins: [grapesWEB],
            pluginsOpts: {
                [grapesWEB]: {
                    // options
                },
            },
        });
    },
};
```

Maka tampilan GrapesJS akan berubah menjadi Web Builder dengan toolbox yang lebih lengkap.

![Cara install dan integrasi GrapesJS dengan Vue 2](https://debug.my.id/content/images/2025/06/image-125.png)

[](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpH-hYZIJzy9dmub0jw7hWay5kvbJVYhxF5q1JAc96dSG3%5FQv84YCy6nN5p3hgOgzA01ovVP3qWRqGQKgklC2UYa5jJu8UB9g5Wn2F4GrmsObYVdvtMoQy1r2Ghg1t73uTOUxc1y0f88M/s16000/Screen+Shot+2021-09-04+at+08.10.11.jpg?ref=debug.my.id)Keseluruhan kode **App.vue**

```javascript
<template>
    <div id="app"></div>
</template>

<script>
import grapesJS from "grapesjs";
import "grapesjs/dist/css/grapes.min.css";

import grapesWEB from "grapesjs-preset-webpage";
import "grapesjs-preset-webpage/dist/grapesjs-preset-webpage.min.css";

export default {
    name: "App",
    mounted() {
        grapesJS.init({
            showOffsets: 1,
            fromElement: 1,
            container: "#app",
            height: "100%",
            avoidInlineStyle: false,
            plugins: [grapesWEB],
            pluginsOpts: {
                [grapesWEB]: {
                    // options
                },
            },
        });
    },
};
</script>

<style>
body,
html {
    height: 100%;
    margin: 0;
}
</style>

```

Dengan ini maka Anda sudah berhasil meng-integrasikan GrapesJS ke dalam Vue. Selanjutnya silahkan lakukan eksperimen dengan menggunakan preset yang lain atau bahkan membuat plugin sendiri sesuai dengan kebutuhan.

Sekian tip dan trik kali ini.Selamat mencoba dan semoga yang sedikit ini bermanfaat.

Sumber : [https://github.com/artf/grapesjs](https://github.com/artf/grapesjs?ref=debug.my.id)