Cara Mudah Pemasangan Disqus di Nuxt.js The Intuitive Vue Framework

Sepertinya sebuah blog kurang lengkap jika tidak memiliki comment system, karena pembaca akan kesulitan melakukan komunikasi dengan penulis. Oleh karena itu personal blog soefyansyah.my.id ini masih ada banyak kekurangan terlebih lagi di bagian comment systemnya, personal blog soefyansyah.my.id per tanggal 11/06/2020 masih belum memiliki comment system.

Pada postingan kali ini saya mau berbagi "Cara Mudah Pemasangan Disqus di Nuxt.js The Intuitive Vue Framework" baiklah berikut tahap tahap yang harus kita lakukan .

Melakukan Instalasi Vue Disqus Dengan NPM.

Melakukan instalasi package menggunakan Node Package Manager/npm dengan mengetikan perintah berikut ini di root directory project nuxt .

npm install vue-disqus

pastikan internetnya aktifya agar bisa mendowload packagenya. setelah selesai melakukan download packagenya kita lanjut ke tahap selanjutnya.

Membuat File disqus.js di Dalam Directory "plugins"

Membuat file "disqus.js" di dalam directory plugins adalah tahap untuk membuat plugins baru di dalam project nuxt. Untuk membuat plugins cukup isi code di dalam file disqus.js dengan code berikut ini.

import Vue from 'vue'
import VueDisqus from 'vue-disqus'

Vue.use(VueDisqus, {
  shortname: 'username_disqus_kamu'
})

crtl+s (simpan) dan plugin disqus.js sudah selesai di buat. tapi plugin ini harus di pasang agar bisa di gunakan.

Memasang plugin Disqus di dalam nuxt.config.js

tahap ini adalah menerapkan plugin disqus di dalam project nuxt kita, edit file nuxt.config.js dengan cara menambahkan code berikut ini.

// ...
plugins: [
  '~/plugins/disqus'
]
// ...

Membuat component Disqus.vue

Membuat component Disqus.vue dan menerapan template comment. Isi file Disqus.vue dengan code berikut ini.

<template>
  <div class="comments">
    <Disqus /> // bisa menggunakan tag ini karena sudah di declaration di file nuxt.config.js sebagai plugin
  </div>
</template>

Memanggil Component Kedalam page

Memasang comment system di blog, dalam case ini saya hanya menampilakn comment di halaman detail blog saja. untuk contohnya bisa seperti code di bawah ini.

<template>
  <div>
    <nuxt />
    <div class="container">
      <Disqus />
    </div>
  </div>
</template>

<script>
import Disqus from "~/components/Disqus.vue"; // melakukan import component

export default {
  components: {
    Disqus // declaration component 
  }
};
</script>

code ini melakukan import dari commponet disqus yang sudah di buat, agar dapat di gunakan di page detail blog.

Penutup.

Tutorial ini bersumber dari https://ktquez.github.io/vue-disqus/howto/nuxt.html , jadi sebuah blog akan lebih bagus jika ada fitur untuk meninggalkan pesan. Dengan menggunakan disqus saya tidak perlu mimikirkan relasi data untuk blog dan comment, karena sudah lebih mudah menggunakan Disqus, jika kamu belum memiliki account disqus bisa daftar dulu ya di halaman web resminya https://disqus.com/.

Demikian semoga bermanfaat jangan lupa tinggalkan pesan :)