drawer.js

// Vuex module

const state = {
  menuVisibility: false
}

const mutations = {
  TOGGLE_DRAWER() {
    state.menuVisibility = !state.menuVisibility // Toggle menuVisibility  
  },
  CLOSE_DRAWER() {
    state.menuVisibility = false
  },
  OPEN_DRAWER() {
    state.menuVisibility = true
  }
}

const getters = {
  isVisible: state => state.menuVisibility
}

export default {
  getters,
  mutations,
  state
}

Home.vue

<template>
  <Page class="page">
    <ActionBar class="action-bar" title="Miyha">
      <NavigationButton text="Menu" icon="res://ic_list_black_24dp" @tap="toggleDrawer" />
      <StackLayout orientation="horizontal">
        <Image src="res://icon" width="40" height="40" verticalAlignment="center" />
        <Label text="iyha" fontSize="24" verticalAlignment="center" />
      </StackLayout>
    </ActionBar>
    <SideDrawer>
      <StackLayout>
        <flash-message autoHide variant="success"></flash-message>
        <Label text="Hello world !" />
        <Label textWrap="true">
          <FormattedString>
            <Span text="Welcome " />
            <Span :text="user.firstname" />          
          </FormattedString>
        </Label>
        <Label :text="resultToShow" />
        <Button text="available" @tap="isAvailable" />
        <Button text="request auth" @tap="requestAuth" />
        <Button text="query steps" @tap="queryData" />
        <ListView for="item in responseData">
          <v-template>
            <Label :text="item.value" />
          </v-template>
        </ListView>
      </StackLayout>
    </SideDrawer>

  </Page>
</template>

<script>
  export default {
    methods: {
      toggleDrawer() {
        this.$store.commit('TOGGLE_DRAWER')
      }
    }
  }
</script>

main.js

Vue.registerElement('RadSideDrawer', () => require('nativescript-ui-sidedrawer').RadSideDrawer)
import SideDrawer from './components/SideDrawer'
Vue.component('SideDrawer', SideDrawer)

Sidedrawer.vue

<template>
  <RadSideDrawer ref="drawer" @drawerClosed="onDrawerClosed" @drawerOpened="onDrawerOpened">
    <StackLayout mainContent ref="mainContent">
      <slot></slot>
    </StackLayout>
    <StackLayout drawerContent ref="drawerContent" class="sideStackLayout">
      <ListView for="link in menuLinks" @itemTap="navigateToLink">
        <v-template>
          <Label :text="link.title" />
        </v-template>
      </ListView>
    </StackLayout>
  </RadSideDrawer>
</template>

<script>
import {mapActions} from 'vuex'
export default {
  mounted() {
    const drawerView = this.$refs.drawer.nativeView
    drawerView.drawerContent = this.$refs.drawerContent.nativeView
    drawerView.mainContent = this.$refs.mainContent.nativeView
  },
  computed: {
    menuVisibility() {
      return this.$store.getters.isVisible
    }
  },
  watch: {
    menuVisibility(value) {
      if(value) {
        this.$refs.drawer.nativeView.showDrawer()
      }else if(!value){
        this.$refs.drawer.nativeView.closeDrawer()
      }
    }
  },
  methods: {
    ...mapActions({
      authLogout: 'AUTH_LOGOUT'
    }),
    onDrawerClosed() {
      this.$store.commit('CLOSE_DRAWER')
    },
    onDrawerOpened() {
      this.$store.commit('OPEN_DRAWER')
    },
    navigateToLink(event) {
      if(event.item.url != '/logout'){
        this.$store.commit('CLOSE_DRAWER')
        this.$router.push(event.item.url)
      }else{
        this.authLogout()
          .then(()=>{
            this.$router.push('/login')
          })
      }
    }
  },
  data() {
    return {
      menuLinks: [
        {title: 'Accueil', url: '/home'},
        {title: 'Formulaires', url: '/forms'},

        {title: 'Déconnexion', url: '/logout'}
      ]
    }
  }
}
</script>

<style scoped>
  .sideStackLayout {
    background-color: gray;
  }

  .sideStackLayout Label {
    color: white;
    font-size: 26;
  }
</style>

<StackLayout mainContent ref="mainContent"> should be <StackLayout ~mainContent ref="mainContent">

same for drawerContent

Where we put <router-view></router-view>, because I'm confused use both manual routing and vue-router