CODEWITHSUNDEEP
vue.jsionic-frameworkionic5vuejs3
Jonas
Jonas

Reputation: 105

Ionic Menu does not show

First of all I'm currently doing an Ionic App + VueJS.

This is my first day using it. Right now I encounter an error using ion-menu, which the menu only shows one time when I'm navigating.

For example:

  1. In Home component and click the menu button -> sidebar shows
  2. When I navigate to Merchant Component and click the menu button -> sidebar does not show
  3. I refresh the page in Merchant and click the menu button -> sidebar shows

here's my code:

BaseLayout.vue

<template>
  <ion-page>
    <customer-header  :pageTitle="pageTitle" :page-default-back-link="pageDefaultBackLink"></customer-header>
    <ion-content>
      <slot />
    </ion-content>
    <customer-footer v-show="showMenu()"></customer-footer>
  </ion-page>
</template>

CustomerHeader.vue

<template>
  <div>
    <ion-toolbar>
      <ion-buttons slot="start" :class="pageTitle != 'Home' ? 'w-100' : ''" >
        <ion-back-button :default-href="pageDefaultBackLink"> </ion-back-button>
        <ion-menu-button
          menu="main-menu"
          autoHide="false"
          :class="pageTitle != 'Home' ? 'menu-right' : ''"
        ></ion-menu-button>
      </ion-buttons>
    </ion-toolbar>

    <ion-menu menuId="main-menu"  content-id="main" type="overlay">
      <ion-header>
        <ion-toolbar color="primary">
          <ion-title>Start Menu</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list>
          <ion-item name="mail" slot="start">Menu Item</ion-item>
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-router-outlet id="main"></ion-router-outlet>
  </div>
</template>

Thank you very much in advance, I hope you give me some time to help me. Thanks again.

Upvotes: 0

Views: 1481

Answers (1)

Jonas
Jonas

Reputation: 105

I solved my problem, i hope someone this will be also helpful to beginners, I saw my ion-router-outlet in my App.vue file, so i made a mistake that i duplicated it since i just follow the tutorial.

You can just put the ion-menu inside the App.vue, then you can put the menu-button to any page you want. Goodluck!

Upvotes: 3

Related Questions