Ionic4+VueJS hamburger menu

Admin 1
Viewed 1677

Question: How can I create a swipable side menu for an ionic v4 vuejs app?

So I'm new to ionic and have been trying to migrate an existing web app to ionic. Following the steps on the limited articles up on ionic4 with vue. I installed @ionic/core, added the CDN to the index file, and the ignore flag for [/ion/] web compoenets right before mounting Vue.

I'm currently getting this error: Menu: must have a "content" element to listen for drag events on.

I'm a bit unsure of what to follow as many of the articles out there are on ion v2 and v3, I know there were a few changed made to how the ui-components and based on ionic4 beta docs what I have seems to be correct:'

<script lang="ts" src="./Layout.ts"></script>

<template>
    <div class="layoutComponent">
        <ion-page>

            <ion-menu>
                <ion-header>
                    <ion-toolbar color="primary">
                        <ion-title>Menu</ion-title>
                    </ion-toolbar>
                </ion-header>

                <ion-content>

                    <ion-list>
                        <ion-list-header>
                            Navigate
                        </ion-list-header>

                        <ion-item>
                            <router-link :to="{name: 'link 1'}">
                                <ion-label full>
                                    <eg-localizer token="1"></localizer>
                                </ion-label>
                            </router-link>
                        </ion-item>
                        <ion-item>
                            <router-link :to="{ name: 'link2'}">
                                <ion-label full>
                                    <localizer token="2"></localizer>
                                </ion-label>
                            </router-link>
                        </ion-item>
                        <ion-item>
                            <a target="_blank" href="https://foo.com">
                                <ion-label full>
                                    <localizer token="external link 3"></localizer>
                                </ion-label>
                            </a>
                        </ion-item>
                    </ion-list>
                </ion-content>
            </ion-menu>

            <!-- main point of entry for app content -->
            <slot></slot>

        </ion-page>
    </div>
</template>
ionic4 ionic-framework vue.js typescript javascript
2 Answers

The documentation on ionic framework it's a bit unclear or incomplete, but I was able to make the menu working:

<template>
  <ion-menu side="start" content-id="menu-content">
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Start Menu</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content id="menu-content">
      <ion-list lines="full">
        <ion-item v-for="item in items" :key="item.name">
          <ion-icon :name="item.icon" slot="start"></ion-icon>
          <ion-label>{{ item.name }}</ion-label>
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-menu>
</template>

<script>
export default {
  data () {
    return {
      items: [
        { name: 'Home', icon: 'home', href: 'home' },
        { name: 'About', icon: 'information-circle', href: 'about' },
        { name: 'Articles', icon: 'list-box', href: 'articles' },
        { name: 'Log out', icon: 'logout', href: 'logout' }
      ]
    }
  }
}
</script>

The key is here:

<ion-menu side="start" content-id="menu-content">

and here

<ion-content id="menu-content">

Hope this helps anyone.

user_48827910

For Ionic 6 + Vue js 3.0 make sure you have your component <ion-router-outlet /> inside a <ion-content>, and that ion-content should have the id you have specified in content-id parameter for the menu.

  <ion-content id="main">
    <ion-router-outlet />
    </ion-content>
user_83279070
Related