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    var title = this.$route.name;
25    var i = 1;
26    while (i < this.$route.name.split('-').length) {
27      var index = title.search('-');
28      title = title.replace(
29        '-' + title.charAt(index + 1),
30        title.charAt(index + 1).toUpperCase()
31      );
32      i++;
33    }
34    this.title = i18n.t('appPageTitle.' + title);
35    document.title = this.title;
36  },
37};
38</script>
39
40<style lang="scss" scoped>
41.page-title {
42  margin-bottom: $spacer * 2;
43}
44p {
45  max-width: 72ch;
46}
47</style>
48