layout nuxt

<template>
  <div id="app" class="app">
    <dialogs-wrapper name="lista-express" wrapper-name="lista-express" />
    <dialogs-wrapper name="default" wrapper-name="default" />

    <overlay v-if="overlayActive"/>
    <loader/>
    <sidebar-menu/>
    <main-header/>
    <notification/>
    <sign-up/>
    <mi-cuenta-modals/>
    <div id="viewport" class="main w-100 relative">
      <nuxt/>
    </div>
    <Footer />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Overlay from '~/components/Overlay'
import Loader from '~/components/Loader'
import SidebarMenu from '~/components/SidebarMenu'
import MainHeader from '~/components/Header'
import Notification from "~/components/Core/Notification"
import Modal from "~/components/Core/Modal"
import SignUp from '~/components/Auth/SignUp'
import MiCuentaModals from '~/components/MiCuenta/MiCuentaModals'
import Footer from '~/components/Footer/Footer'

function data() {
  return {
    ordersData: [],
  };
}

function created() {
  this.$nuxt.$on('offline-order-confirmation', (payload) => {
    this.ordersData = payload;
    this.$nuxt.$emit('modal-show', 'modal-order-confirmation');
  });
}


const computed = {
  ...mapState({
    overlayActive: state => state.overlay,
  }),
};

const components = {
  Overlay,
  Loader,
  SidebarMenu,
  MainHeader,
  Notification,
  Modal,
  SignUp,
  MiCuentaModals,
  Footer,
}

export default {
  name: 'app-layout',
  data,
  components,
  computed,
  created
}
</script>

<style lang="scss">

</style>