Ionic 4 Vue JS menu help

sts-ryan-holton · September 10, 2018, 9:41am

Hi, I’m trying to use Ionic 4 beta with Vue JS. I’ve setup a Vue JS project using the CLI and have successfully imported Ionic into it. I’m trying to build a slide out menu (navigation) using the menu component https://beta.ionicframework.com/docs/api/menu/#usage

I’ve used the Javascript variant of the menu here and have copied the following button for the menu:

<ion-button id="left" onclick="openStart()" class="button button-ios button-solid button-solid-ios hydrated" tappable="" fill="solid">Open start menu</ion-button>

This is my Vue JS file, I’ve got my methods set up but am having difficulty getting the menu to slide out.

<template>
  <div id="app">
    <ion-app>
      <ion-menu side="start">
        <ion-header>
          <ion-toolbar color="secondary">
            <ion-title>Left Menu</ion-title>
          </ion-toolbar>
        </ion-header>
      </ion-menu>

      <ion-menu side="end">
        <ion-header>
          <ion-toolbar>
            <ion-title>Hola</ion-title>
          </ion-toolbar>
        </ion-header>

        <ion-content padding>
          hola macho
        </ion-content>
      </ion-menu>

      <ion-page class="show-page" main>
        <ion-header>
          <ion-toolbar>
            <ion-title>LLC Dashboard </ion-title>
          </ion-toolbar>
        </ion-header>
        <ion-content class="content" padding>
          <ion-grid>
            <ion-row>
              <ion-col>
                <div>
                  <ion-button full>1</ion-button>
                </div>
              </ion-col>
              <ion-col>
                <div>
                  <ion-button full>2</ion-button>
                </div>
              </ion-col>
              <ion-col>
                <div>
                  <ion-button full>3</ion-button>
                </div>
              </ion-col>
            </ion-row>
            <ion-row>
              <ion-col>
                <div>
                  <ion-button full>4</ion-button>
                </div>
              </ion-col>
              <ion-col>
                <div>
                  <ion-button full>5</ion-button>
                </div>
              </ion-col>
              <ion-col>
                <div>
                  <ion-button full>6</ion-button>
                </div>
              </ion-col>
            </ion-row>
          </ion-grid>
          <ion-button id="left" @click="openStart()" class="button button-ios button-solid button-solid-ios hydrated" tappable="" fill="solid">
            Open start menu
          </ion-button>
          <ion-button @click="openEnd()" class="button button-ios button-solid button-solid-ios hydrated" tappable="" fill="solid">    Open end menu
          </ion-button>
        </ion-content>
      </ion-page>
    </ion-app>
    <ion-menu-controller></ion-menu-controller>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      items: [{id: 0, name: 'Ahmed'}, {id: 1, name: 'Naima'}]
    }
  },
  methods: {
    openStart () {
      
    },
    openEnd () {
      
    }
  }
}
</script>

I’m new to this framework and Vue JS and am looking for some guidance here.

pcr · September 10, 2018, 9:34pm

Me too. I have problems with side menu in Vue. I hope somebody can help.
My problem not showing the menu, but showing the main panel. As soon as the menu slides in the main panel is cleared.

aaronksaunders · September 11, 2018, 3:44am

<template>
  <div id="app">
    <ion-app>
      <ion-menu side="start">
        <ion-header>
          <ion-toolbar color="secondary">
            <ion-title>Left Menu</ion-title>
          </ion-toolbar>
        </ion-header>
        <ion-content padding>
          <ion-label>START MENU CONTENTS</ion-label>
        </ion-content>
      </ion-menu>

      <ion-menu side="end">
        <ion-header>
          <ion-toolbar>
            <ion-title>Hola</ion-title>
          </ion-toolbar>
        </ion-header>

        <ion-content padding>
          <ion-label>END MENU CONTENTS</ion-label>
        </ion-content>
      </ion-menu>

      <div class="ion-page" main>
        <ion-header>
          <ion-toolbar>
            <ion-title>Menu - Basic</ion-title>
          </ion-toolbar>
        </ion-header>
        <ion-content>
          <ion-button @click="openStart">Open Start Menu</ion-button>
          <ion-button @click="openEnd">Open End Menu</ion-button>
        </ion-content>
      </div>

    </ion-app>
    <ion-menu-controller></ion-menu-controller>
  </div>
</template>
<script>
export default {
  name: 'App',
  data () {
    return {
      items: [{id: 0, name: 'Ahmed'}, {id: 1, name: 'Naima'}]
    }
  },
  methods: {
    openStart () {
      document.querySelector('ion-menu-controller').open('start')
    },
    openEnd () {
      document.querySelector('ion-menu-controller').open('end')
    }
  }
}
</script>

see functioning app on codesandbox.io => https://codesandbox.io/s/ylyzzk3v1

sts-ryan-holton · September 11, 2018, 3:50pm

Thanks, this worked for us!

pcr · September 12, 2018, 12:23pm

Thanks, this works for me too!
I struggeled with some ion directives in ,template. like: ion-app, ion-page, etc
But finally I got it all working.

For me it is a bit weird to write the menu-templates’s in the main component. That main component is a bit complex now

sts-ryan-holton · September 12, 2018, 1:23pm

I understand, but this is the point of a SPA.

aaronksaunders · September 12, 2018, 2:01pm

i don’t understand what you are asking? but if you are talking about lack of components, then take a look at the project again. I have updated it to utilize SFC for menus and main page

<template>
  <div id="app">
    <ion-app>
      <menu-left/>
      <menu-right/>
      <main-page/>
    </ion-app>
    <ion-menu-controller></ion-menu-controller>
  </div>
</template>

<script>
import MainPage from "./MainPage"
import MenuRight from "./MenuRight"
import MenuLeft from "./MenuLeft"
export default {
  name: 'App',
  components : { MainPage, MenuRight, MenuLeft },
  data () {
    return {
      items: [{id: 0, name: 'Ahmed'}, {id: 1, name: 'Naima'}]
    }
  },
  methods: {
  }
}
</script>

pcr · September 14, 2018, 8:30am

OK now. Great, great great…thanks it all works fine now.
Big step forward in rebuild my app made with Ionic v1 and angular into an app build with ionic v4 with vue.

pcr · September 17, 2018, 2:06pm

You helped me with the menus. As I said before: this works perfect, but…
That page is my main page. It has both start and end Menus.

The start menu has some items to switch to other pages.
Most of those pages has only a start menu.
Those pages are opened with only the main part. No menu opens. Trying to open the menu with a button in the toolbar that invoke document.querySelector(‘ion-menu-controller’).open(‘start’)) also without success. These @click event function is logged.

For my understanding can you explain to me the structure of an Vue app with Ionicv4.
I have in my index.html:

<div id="app">
    <ion-app>
    </ion-app>
    <ion-menu-controller></ion-menu-controller>
</div>

In App.vue I have:

<template>
    <ion-vue-router></ion-vue-router>
</template>

BTW I left out <ion-app> and <ion-menu-controller> from your example.

Is this the way to do it.

Do i have to add <ion-page> in my components?
Can I adding components in .vue files?
Is routing added the way it should work?

I know this is a lot of stuff and a lot of questions, but I hate it if I don’t understand
how it should be. I served a lot od sites about ionic4. Some said I have to wait until
Ionic releases the type=vue in Ionic cli.

I still hope you can give some light in the dark.

aaronksaunders · September 18, 2018, 12:09am

i don’t understand the question, can you break it down in to separate pieces?

dharmatv · March 30, 2019, 7:15am

Me too, i got same problem
Please help me anyone

<template>
<div>
<ion-app>
  <ion-menu side="start">
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Start Menu</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list>
        <ion-item>Menu Item</ion-item>
        <ion-item>Menu Item</ion-item>
        <ion-item>Menu Item</ion-item>
        <ion-item>Menu Item</ion-item>
        <ion-item>Menu Item</ion-item>
      </ion-list>
    </ion-content>
  </ion-menu>

  <ion-menu side="start" menu-id="custom" class="my-custom-menu">
    <ion-header>
      <ion-toolbar color="tertiary">
        <ion-title>Custom Menu</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list>
        <ion-item>Menu Item</ion-item>
        <ion-item>Menu Item</ion-item>
        <ion-item>Menu Item</ion-item>
        <ion-item>Menu Item</ion-item>
        <ion-item>Menu Item</ion-item>
      </ion-list>
    </ion-content>
  </ion-menu>

  <ion-menu side="end" type="push">
    <ion-header>
      <ion-toolbar color="danger">
        <ion-title>End Menu</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list>
        <ion-item>Menu Item</ion-item>
        <ion-item>Menu Item</ion-item>
        <ion-item>Menu Item</ion-item>
        <ion-item>Menu Item</ion-item>
        <ion-item>Menu Item</ion-item>
      </ion-list>
    </ion-content>
  </ion-menu>

  <div class="ion-page" main>
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu - Basic</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content padding>
      <ion-button expand="block" @click="openFirst()">Open Start Menu</ion-button>
      <ion-button expand="block" @click="openEnd()">Open End Menu</ion-button>
      <ion-button expand="block" @click="openCustom()">Open Custom Menu</ion-button>
    </ion-content>
  </div>

</ion-app>
<ion-menu-controller></ion-menu-controller>
</div>
</template>

<script>
export default {
    name:'sidemenu',
    components: {
        
    },
    props: {

    },
    data: function(){
        return {
        }
    },
    methods: {
    openFirst: function () {
      document.querySelector('ion-menu-controller').open('start')
    },
    openEnd: function () {
      document.querySelector('ion-menu-controller').open('end')
    }
  }
}
</script>

<style>
.my-custom-menu {
  --width: 500px;
}
</style>