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