Ionic 4 Vue JS menu help


#1

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.


#2

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.


#3
<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


#4

Thanks, this worked for us! :slight_smile:


#5

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


#6

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


#7

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>

#8

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.


#9

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.


#10

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