Cara Membuat Dynamic Page Title di Vue.js - Laravel

wahyunanangwidodo

wahyunanangwidodo Rabu, 23 Juni 2021

Cara Membuat Dynamic Page Title di Vue.js - Laravel

Judul yang diberikan pada suatu halaman dapat memberikan informasi tentang apa dan atau isi dari halaman tersebut, serta dapat berubah setiap berpindah ke halaman lain yang berbeda.

Selain kita tampilkan pada halaman itu sendiri, kita juga berikan pada dokumen html menggunakan tag <title> yang akan tampil pada tab browser.

Pemberian judul ini dapat kita lakukan dan sesuaikan dengan struktur atau susunan kerangka aplikasi seperti apa yang kita buat dalam manajemen tampilan, dan apakah ditulis secara manual atau otomatis dari data kueri database.

Di laravel, kita dapat membuatnnya dengan mudah jika meggunakan metode template inheritance:

//app.blade.php
<html>
    <head>
        <title>@yield('title')</title>
    </head>
    <body> 
        <div class="container">
            @yield('content')
        </div>
    </body>
</html>

Sebuah file digunakan sebagai induk / parent dengan dokumen HTML dan susunan tata letak yang dapat menampilkan konten dari komponen anak menggunakan directive.

Direktif @yield digunakan untuk menampilkan konten pada bagian tertentu. Seperti contoh di atas, kita gunakan direktif @yield untuk menampilkan konten pada title dokumen dari komponen anak. Kemudian di komponen anak, untuk isi konten, kita definisikan menggunakan direktif @section dengan value, seperti di bawah ini.

//child.blade.php
@extends('app')

@section('title', 'Judul Halaman')
//dynamic.blade.php
@extends('app')

@section('title', $post->title) 

@section('content')

  <div class="blog-post">
    <h1>{{$post->title}}</h1>
    <p>{{$post->body}}</p> 
  </div>
  
@endsection

Sedangkan di vue.js, ada beberapa cara yang bisa kita gunakan -- ada dua yang akan ditunjukan disini. Kita bisa lakukan dengan mengakses instance vue mengambil value dari komponen menggunakan vm dan menyetel title dokumen atau menggunakan plugin / modul yang ditambahkan ke aplikasi.

Akses vm

Mari kita lihat cara pertama. Jika menggunakan vue router, kita bisa gunakan metode beforeRouteEnter dan mengakses vm, mengambil respon dari permintaan ke api yang dibuat sebelum komponen dirender. Seperti contoh permintaan http axios berikut:

//components/show.vue
<script>
export default { 
  data () {
    return {
      post: null 
    }
  }, 
  beforeRouteEnter (to, from, next) {
    next( async vm => { 
     const post = await vm.getPost(to.params.slug);   
     vm.post = post  
     document.title = vm.post.title
   })
  },     
  methods: {  
    async getPost(slug) { 
      const response = await axios.get(`/api/post/${slug}`);
      const post = response.data; 
      return post;
    }, 
  }
}
</script>

vue meta

Cara berikutnya, menggunakan plugin tambahan. Kita bisa gunakan vue-meta untuk menambahkan judul pada dokuman HTML.

Tidak hanya judul atau title, kita juga bisa membuat tag meta untuk aplikasi kita. Cara yang lebih sederhana dan mudah untuk title dinamis. Contoh penggunaanya sebagai berikut:

Install terlebih dahulu vue-meta. Sesuaikan dengan package manager yang digunakan.

//npm
npm install vue-meta

//yarn
yarn add vue-meta

Setelah di install, kita langsung bisa menggunakannya pada komponen vue yang kita miliki. Seperti contoh berikut:

//posts.vue
<script>
export default {
  metaInfo: {
    title: 'Posts',
    meta: [{
      vmid: 'description',
      name: 'description',
      content: 'Blog Posts',
    }]
  },
  data() {
    return {
      posts: '', 
    }
  }, 
  mounted() {
    axios.get(`/api/posts`)
      .then(response => {
        console.log(response.data) 
        this.posts = response.data.posts 
      })
      .catch(error => { 
      console.error(error);
      })
  }, 
}
</script>
//show.vue
<script>
export default {
  metaInfo() {
    return {
      title: this.meta.title,
      meta: [{
        vmid: 'description',
        name: 'description',
        content: this.meta.description,
      }]
    }
  },
  data () {
    return {
      post: null,
      error: null,  
      meta: {
        title: null,
        description: null,      
      }
    }
  },  
  created(){
    this.getPost()
  },
  methods: { 
    getPost(){
      this.loading = true
      axios.get(`/api/post/${this.$route.params.slug}`)
      .then(response => {
        let post = response.data 
        this.post = post  
        this.meta = {
            title: post.title,
            description: post.description   
        }
      })
      .catch(error => { 
        console.error(error);
      })
    }
  }
}

Hasilnya seperti di bawah ini.

Cara Membuat Dynamic Page Title di Vue.js - Laravel

Penggunaan yang sama jika menggunakan route beforeRouteEnter:

...
beforeRouteEnter (to, from, next) {
    next( async vm => { 
    const post = await vm.getPost(to.params.slug);   
    vm.post = post  
    vm.meta = {
      title: post.title,
      description: post.title     
    }
  })
},   
...

Itu dia beberapa contoh pemberian title atau judul halaman pada aplikasi laravel dan vue.js. Silahkan dicoba.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Berlangganan

Berlangganan untuk mendapat pemberitahuan artikel terbaru via email.