Home » Javascript » Cara Mengubah Title pada Aplikasi Nuxt.js

Cara Mengubah Title pada Aplikasi Nuxt.js

Ditulis oleh Admin Anakbit · 17 February 2020

Untuk mengubah title pada aplikasi yang dibuat dengan menggunakan Nuxt.js, kita mengubah nilai property title yang ada pada properti head yang ada di file config. Selain itu kita bisa juga mengubah title di tiap-tiap halaman, ataupun juga di layout dengan memanggil method head, yang akan menimpa isi nilai head yang ada di config. Kita bisa juga menggunakan titleTemplate untuk memberikan template untuk title yang kita definisikan. Lebih jelasnya ada dibawah ini.

1. nuxt.config.js

export default {
  head: {
    title: 'My Website'
  }
}

Dengan memberikan nilai title di file config ini, kita memberikan title untuk keseluruhan halaman di aplikasi Nuxt.js yang kita buat.

2. head() method

<template>
  <h1>{{ title }}</h1>
</template>

<script>
export default {
  data () {
    return {
      title: 'Hello World!'
    }
  },
  head () {
    return {
      title: this.title,
    }
  }
}
</script>

Dengan menggunakan method head() seperti diatas, kita bisa menimpa title yang sebelumnya sudah di definisikan di file config.

3. titleTemplate

export default {
  head: {
    titleTemplate: '%s - Nuxt.js',
    title: 'My Website'
  }
}

Title template ini kita gunakan untuk memberikan semacam format universal kepada title di semua halaman. Dengan isi titleTemplate diatas, maka title yang muncul di halaman adalah My Website - Nuxt.js

Share:
Admin Anakbit