Example giving in ion-menu for vuejs not working for me

Ionic Framework ionic-v3
1

Hello

I’m using ionic4 with vuejs ( I’m not using typescript).
I just want to add ion-menu to my app but the example giving in the official doc not working for me…
any helps, please

2

I think this might help you out as i implemented this for a demo app.

App.vue

<template>
  <div id="app">
    <ion-app>
      <left/>
      <router-view/>
      <right/>
    </ion-app>
    <ion-menu-controller></ion-menu-controller>
  </div>
</template>

<script>
import Left from "@/components/nav/Left.vue";
import Right from "@/components/nav/Right.vue";
export default {
  name: "App",
  components: { Left, Right }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from "vue";
import App from "./App";
import router from "./router";
import Ionic from "@ionic/vue";

Vue.use(Ionic);

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: "#app",
  router,
  components: { App },
  template: "<App/>",
  methods: {
    openStart() {
      document.querySelector("ion-menu-controller").open("start");
    },
    openEnd() {
      document.querySelector("ion-menu-controller").open("end");
    }
  }
});

Home.Vue

<template>
  <div class="hello">
    <ion-header>
      <ion-toolbar color="dark">
        <ion-buttons slot="secondary">
          <ion-button @click="openStart">
            <ion-icon slot="icon-only" name="menu"></ion-icon>
          </ion-button>
          <ion-button>
            <ion-icon slot="icon-only" name="search"></ion-icon>
          </ion-button>
        </ion-buttons>
        <ion-buttons slot="primary">
          <ion-button color="danger">
            <ion-icon slot="icon-only" name="more"></ion-icon>
          </ion-button>
        </ion-buttons>
        <ion-title>Dark Toolbar</ion-title>
      </ion-toolbar>
    </ion-header>
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>

    <ion-content id="content"></ion-content>
    <ion-button @click="showDialogAlert" full>Show Alert Box</ion-button>
    <ion-button @click="openStart">Open Start Menu</ion-button>
    <ion-button @click="openEnd">Open End Menu</ion-button>
  </div>
</template>

<script>
import { Plugins } from "@capacitor/core";
export default {
  name: "Home",
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  },
  methods: {
    openStart() {
      document.querySelector("ion-menu-controller").open("start");
    },
    openEnd() {
      document.querySelector("ion-menu-controller").open("end");
    },
    async showDialogAlert() {
      await Plugins.Modals.alert({
        title: "Alert",
        message: "This is an example alert box"
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

nav\Left.vue

<template>
  <ion-menu side="start" content-id="content">
    <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>
</template>
<script>
export default {
  name: "left"
};
</script>

copy the left.vue and rename it to right.vue

you are done :grinning: