Vue Page Title - Example 03

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 EMPERORS = [
  'Shanks',
  'Marshall D. Teach',
  'Monkey D. Luffy',
  'Buggy'
]

const app = createApp({
  title () {
    return `🏴‍☠️ ${this.emperor}`
  },
  data () {
  	return {
    	emperor: 'Four Emperors',
    }
  },
  computed: {
    color() {
      return `#${intToRGB(hashCode(this.emperor))}`
    },
  },
  mounted() {
    this.$interval = setInterval(() => {
      this.emperor = EMPERORS[Math.floor(Math.random() * EMPERORS.length)]
    }, 2000)
  },
  beforeDestroy() {
    clearInterval(this.$interval)
  },
  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;
}