Vue2-Simplert - Pengalaman Membuat Library Menggunakan Vue2

Vue2-Simplert adalah sebuah component yang dibuat untuk framework Vue versi 2 untuk memenuhi kebutuhan saya dan kantor tempat saya bekerja akan sebuah komponen yang mirip seperti SweatAlert yang telah kita kenal sebelumnya. Sebenarnya sudah ada beberapa alternatif diluar sana, namun setelah menimbang dari beberapa hal kita memutuskan untuk membuatnya sendiri saja dengan harapan nantinya akan mudah untuk di maintain dan di custom sesuai dengan kemauan kita.

Vue2-Simplert sendiri saya coba inisialisasi pembuatannya sebagai project open-source dengan harapan bisa digunakan oleh mereka yang mempunyai problem yang sama serta bisa mendapatkan bantuan sehingga bisa lebih cepat dalam pengembangannya.

Vue2-Simplert tentu saja tidak datang langsung seperti sekarang yang kalian lihat. Ada perjalanan seperti juga perjalanan saya yang masih sangat baru belajar Vue versi 2 serta belajar membuat project open-source yang baik dan layak digunakan orang lain.

Menengok ke belakang pada versi awal saya tidak begitu banyak membutuhkan setup yang aneh karena saya memang ingin fokus pada inisialisai pembuatan komponen nya, jadi saya putuskan untuk mencari-cari beberapa repository Vue2 dengan setup yang minimalis. Setelah mencari-cari akhirnya saya temukan repository yang saya pikir cocok untuk dijadikan skeleton project dan kebetulan repo tersebut punya orang Indonesia. Anda mungkin bisa melihat repositorinya disini.

Dengan menggunakan skeleton ini pada masa-masa awal pembuatan Vue2-Simplert saya memulai untuk membuat komponen sederhana yang bisa memunculkan popup dan bisa di set predefine config layaknya SweatAlert.

Saat ini sendiri Vue2-Simplert telah banyak berkembang sejak dari masa awal release termasuk migrasi skeleton dari yang sederhana menjadi menggunakan Vue-CLI skeleton agar mudah setup unit test dan lain-lain.

Menyiapkan project open-source Saya juga belajar untuk meyiapkan dokumentasi agar orang lain bisa mudah menggunakan dan membantu mengembangkan, dan sampai saat ini Vue2-Simplert sudah memiliki dokumentasi yang lumayan lengkap yang bisa Anda lihat di halaman wiki Vue2-Simplert.

Setelah berbagai perubahan pada design dan kodenya berikut adalah cara menggunakan Vue2-Simplert mulai dari versi 0.2.1 :

1. Instalasi

   npm install vue2-simplert — save-dev
              // atau
              yarn add vue2-simplert
          

2. Komponen Referer

   import Simplert from 'vue2-simplert'
              export default {
                 components: {Simplert}
              };
          

3. Template View

   <simplert useRadius=true useIcon=true ref="simplert">
          </simplert>
          

4. Membuka Popup

   let obj = {
             title: 'Title',
             message: 'Message',
             type: 'success'
          }
          this.$refs.simplert.openSimplert(obj)
          

5. Konfigurasi Object

   {
            title: 'test', //string -- title alert
            message: 'message', //string -- message alert
            type: 'success', //string -- type : info (default), success, warning, error
            customClass: '', //string -- custom class in simplert div
            customIconUrl: '', //string -- custom url custom image icon
            customCloseBtnText: '', //string -- close button text
            customCloseBtnClass: '', //string -- custom class for close button
            onClose: this.onClose, //function -- when close triggered
            useConfirmBtn: false, //boolean -- using confirm button
            customConfirmBtnText: '', //string -- confirm button text
            customConfirmBtnClass: '', //string -- custom class for confirm button
            onConfirm: this.onConfirm, //function -- when confirm button triggered
            disableOverlayClick: false //boolean -- set to true if you want disable overlay click function
          }
          

Anda bisa melihat semua dokumentasi dari mulai cara memasang, cara menggunakan, contoh penggunaan sampai config yang tersedia di halaman wiki Vue2-Simplert disini.

Pada akhirnya, project ini bukanlah project wah yang bisa begitu berguna buat Anda mungkin, tapi semoga apa yang saya bagikan bisa berguna bagi mereka yang sedang mengalami dan membutuhkan solusi yang sama dengan kami.

Anda bisa membuka issue di Github Repository Vue2-Simplert bila ada request feature atau menemukan bug dalam Vue2-Simplert disini.

Ditulis oleh Irfan Maulana.

Salam.