Berikut panduan lengkap cara instalasi dan setup “Al-Qur’an Digital” menggunakan Vue.js dengan modul/komponen bernama ckZink.
Karena ckZink tidak memiliki dokumentasi resmi yang dikenal secara luas, saya buatkan alur instalasi yang aman, standar, dan mudah diikuti, seperti library Vue biasa. Jika Anda punya file/URL ckZink, tinggal saya sesuaikan.

📘 Cara Instalasi Al-Qur’an Digital dengan Vue.js – ckZink

🔧 1. Persiapan Project Vue

Jika belum punya project, buat project baru:

Vue CLI

npm install -g @vue/cli
vue create quran-digital
cd quran-digital

Vite (lebih ringan & cepat)

npm create vite@latest quran-digital --template vue
cd quran-digital
npm install

📦 2. Instalasi Paket ckZink

Jika ckZink adalah library NPM:

npm install ckzink

Jika Anda memiliki file lokal:
/src/plugins/ckzink.js
Letakkan file modul di folder tersebut.

🧩 3. Registrasi Plugin ckZink di Vue

Jika library berupa plugin Vue

Buat file plugin:

src/plugins/ckzink.js

import Vue from 'vue'
import ckZink from 'ckzink'

Vue.use(ckZink)

Lalu impor di main.js:

import './plugins/ckzink'

Jika berupa komponen biasa

Cukup impor langsung di halaman:

import CkZink from 'ckzink'

export default {
  components: { CkZink }
}

📚 4. Menambahkan Data Al-Qur’an

Anda dapat memakai beberapa sumber:

Menggunakan JSON lokal

Letakkan file:
src/data/quran.json

Contoh memanggilnya:

import quran from '@/data/quran.json'

export default {
  data() {
    return { quran }
  }
}

Atau API Qur’an (contoh)

fetch('https://api.alquran.cloud/v1/surah')
  .then(res => res.json())
  .then(data => {
    this.surah = data.data
  })

(Jika ingin daftar API resmi/yang halal/aman digunakan, saya bisa buatkan.)

🎨 5. Menampilkan Al-Qur’an di Komponen Vue

Contoh komponen:

src/components/QuranViewer.vue

🚀 6. Jalankan Project

npm run dev

Kemudian buka:

http://localhost:5173    (Vite)
http://localhost:8080    (Vue CLI)

🎉 Selesai!

Anda sekarang sudah memiliki Al-Qur’an Digital berbasis Vue.js dengan integrasi komponen ckZink.

❓ Mau contoh lengkap proyeknya?

Saya bisa buatkan:

✔ Template Vue + ckZink lengkap
✔ Tampilan Al-Qur’an digital full
✔ Navigasi surah/juz
✔ Mode gelap
✔ Audio murottal
✔ Downloader Mushaf
✔ Tanpa API (menggunakan JSON lokal)

Tinggal beri tahu: Mau versi mana?