Ask Cara install dan integrasi GrapesJS dengan Vue 2 AdityaDees

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

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.

Baca juga :
Apakah Node.js, npm dan bagaimana menginstallnya

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.

vue create test_grapesjs

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.

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

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 yarnatau npm i grapesjs jika Anda menggunakan npm.

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

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

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

Baca juga :
Apakah Node.js, npm dan bagaimana menginstallnya

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.

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.

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.

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

4. Penyesuaian style

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

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

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.

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.

yarn add grapesjs-preset-webpage

atau dengan npm.

npm i grapesjs-preset-webpage

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

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.

Keseluruhan kode App.vue

<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