Vue Page Title - Example 01

by Vinicius Reis

HTML

<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-page-title@beta"></script>
<div id="app"></div>

CSS

body {
  background-color: #111;
}

JavaScript

const { createApp, h } = Vue
const { pageTitle } = VuePageTitle

const CREW = [
  'Monkey D. Luffy',
  'Roronoa Zoro',
  'Nami',
  'Usopp',
  'Sanji',
  'Tony Tony Chopper',
  'Nico Robin',
  'Franky',
  'Brook',
  'Jinbe',
  'Nefertari Vivi'
]

const app = createApp({
  title: 'Mugiwara no Ichimi',
  mounted() {
    this.$interval = setInterval(() => {
      this.$setPageTitle(CREW[Math.floor(Math.random() * CREW.length)])
    }, 2000)
  },
  beforeDestroy() {
    clearInterval(this.$interval)
  },
  computed: {
    color() {
      return `#${intToRGB(hashCode(this.$title))}`
    },
  },
  render() {
    return h('h1', {
      style: {
        color: this.color
      }
    }, `🏴‍☠️ ${this.$title}`)
  }
})

app.use(pageTitle({
  suffix: '- Vue Page Title',
  mixin: true,
}));

app.mount('#app')

// -----
// from https://stackoverflow.com/a/3426956
function hashCode(str) {
  let hash = 0;
  for (let i = 0; i < str.length; i++) {
    hash = str.charCodeAt(i) + ((hash << 5) - hash);
  }
  return hash;
}

function intToRGB(i) {
  let c = (i & 0x00FFFFFF)
    .toString(16)
    .toUpperCase();

  return "00000".substring(0, 6 - c.length) + c;
}