1<template>
2  <div class="page-title">
3    <h1>{{ title }}</h1>
4    <p v-if="description">{{ description }}</p>
5  </div>
6</template>
7
8<script>
9import i18n from '@/i18n';
10export default {
11  name: 'PageTitle',
12  props: {
13    description: {
14      type: String,
15      default: '',
16    },
17  },
18  data() {
19    return {
20      title: this.$route.meta.title,
21    };
22  },
23  created() {
24    let title = this.$route.name;
25    let i = 1;
26    if (title) {
27      while (i < this.$route.name.split('-').length) {
28        let index = title.search('-');
29        title = title.replace(
30          '-' + title.charAt(index + 1),
31          title.charAt(index + 1).toUpperCase(),
32        );
33        i++;
34      }
35      this.title = i18n.t('appPageTitle.' + title);
36      document.title = this.title;
37    }
38  },
39};
40</script>
41
42<style lang="scss" scoped>
43.page-title {
44  margin-bottom: $spacer * 2;
45}
46p {
47  max-width: 72ch;
48}
49</style>
50