App.vue

<template>
  <div>
    <div v-if="['NotFound'].indexOf($route.name) > -1">
      <NotFound/>
    </div>
    <div v-else id="app">
      <a href="#cve-main-page-content" id="cve-skip-link">Skip to main content</a>
      <PrimaryNavigation :cvenavs="NavigationItems"/>
      <NotificationBannerModule/>
      <RouterView :cvenavs="NavigationItems"/>
      <FoooterModule/>
    </div>
  </div>
</template>

<script>
import NavigationItems from './assets/data/navigation.json';
import PrimaryNavigation from './components/PrimaryNavigation.vue';
import NotificationBannerModule from './components/NotificationBannerModule.vue';
import FoooterModule from './components/FooterModule.vue';
import NotFound from './views/NotFound.vue';
import { usePartnerStore } from '@/stores/partners';
import { useSeoMeta } from '@unhead/vue';

export default {
  components: {
    NotFound,
    PrimaryNavigation,
    NotificationBannerModule,
    FoooterModule
  },
  data() {
    return {
      NavigationItems
    }
  },
  beforeMount() {
    usePartnerStore().populatePartnerShortLongNameMap();
    useSeoMeta({
      title: 'CVE: Common Vulnerabilities and Exposures',
      description: 'At cve.org, we provide the authoritative '
        + 'reference method for publicly known information-security '
        + 'vulnerabilities and exposures'
    });
  }
}
</script>


<style lang="scss">

#cve-skip-link {
  background-color: white;
  text-decoration: underline;
  left: 0;
  padding: .5rem 1rem;
  position: absolute;
  top: -3rem;
  z-index: 50;
  opacity: 0;
}

#cve-skip-link:focus {
  opacity: 1;
  top: 0;
  outline: none;
  transition: .2s ease-in-out;
  box-shadow: unset;
  border-bottom-width: 6px;
  border-bottom-style: solid;
  border-bottom-color: $theme-color-accent-warm;
  border-right-width: 6px;
  border-right-style: solid;
  border-right-color: $theme-color-accent-warm;
}
</style>