app_vue2/components/Layout/Header/Notification.vue

<!--
Notification
-->

<template>
  <v-menu offset-y>
    <template v-slot:activator="{ on, attrs }">
      <v-tooltip bottom>
        <template v-slot:activator="{ on, attrs }">
          <v-btn
            icon
            v-bind="attrs"
            v-on="on"
          >
            <v-icon class="ot_white--text" small>
              fa-bell
            </v-icon>
          </v-btn>
        </template>
        <span>{{ $t('notification') }}</span>
      </v-tooltip>
    </template>
    <v-list dense>
      <template v-for="(item, index) in properties.menu">
        <v-list-item :key="item.title">
          <v-list-item-title v-text="$t(item.title)" />
        </v-list-item>
        <v-divider
          v-if="index < properties.menu.length - 1"
          :key="index"
        />
      </template>
    </v-list>
  </v-menu>
</template>

<script lang="ts">
import { defineComponent, reactive, Ref, UnwrapRef } from '@nuxtjs/composition-api'
import { $useMenu } from '@/use/layout/menu'
import { AnyJson } from '~/types/interfaces'

export default defineComponent({
  setup () {
    const menu: Ref<any> = $useMenu.setupContext().useConfigurationMenuConstruct()

    const properties: UnwrapRef<AnyJson> = reactive({
      menu
    })

    return {
      properties
    }
  }
})
</script>

<style scoped>

</style>