JamieCurnow

import Vue from 'nativescript-vue'
import App from './components/App'

// Prints Vue logs when --env.production is *NOT* set while building
Vue.config.silent = (TNS_ENV === 'production')

Vue.registerElement('RadSideDrawer', () => require('nativescript-ui-sidedrawer').RadSideDrawer)

new Vue({
  render: h => h('frame', [h(App)])

JamieCurnow

import Home from '~/pages/Home'
import PageOne from '~/pages/PageOne'
import PageTwo from '~/pages/PageTwo'

const routes = {
  Home,
  PageOne,
  PageTwo
}

JamieCurnow

<template lang="html">
  <Page>
    <ActionBar>
      <GridLayout width="100%" columns="auto, *">
        <Label text="MENU" @tap="openDrawer()" col="0"/>
        <Label class="title" text="Welcome to NativeScript-Vue!"  col="1"/>
      </GridLayout>
    </ActionBar>

    <GridLayout ~mainContent columns="*" rows="*">

JamieCurnow

export default {
  data () {
    return {
      // we'll use this to enable gestures on our sideDrawer.
      gesturesEnabled: false
    }
  },
  computed: {
    // drawerElement points to the drawer node using vue $refs
    drawerElement () { return (this.$refs && this.$refs.drawer) || null },

JamieCurnow

import Vue from 'nativescript-vue'
import Vuex from 'vuex'

import sideDrawer from './modules/sideDrawer'

Vue.use(Vuex)

let debug = process.env.NODE_ENV !== 'production'

let store = new Vuex.Store({

JamieCurnow

const state = {
  // this toggles the sidedrawer
  sideDrawer: false
}

const mutations = {
  // always and only change vuex state through mutations.
  setSideDrawer (state, data) {
    state.sideDrawer = data
  }

JamieCurnow

<template lang="html">
  <RadSideDrawer ref="drawer" drawerLocation="Left" :gesturesEnabled="gesturesEnabled">
    <StackLayout ~drawerContent backgroundColor="#ffffff">
      <slot name="drawerContent"></slot>
    </StackLayout>
    <Frame ~mainContent>
      <slot name="mainContent"></slot>
    </Frame>
  </RadSideDrawer>
</template>

JamieCurnow

<template lang="html">
  <ScrollView>
    <StackLayout v-for="(page, i) in pages" @tap="goToPage(page.component)" width="100%" borderBottomWidth="2px" borderBottomColor="#2e2e2e" :key="i">
      <Label verticalAlignment="center" width="100%" heigh="50" color="#000000" :text="page.name"/>
    </StackLayout>
  </ScrollView>
</template>

<script>
import sideDrawer from '~/mixins/sideDrawer'

JamieCurnow

<template lang="html">
  <ScrollView>
    <StackLayout width="100%">
      <Label
        v-for="(page, i) in pages"
        @tap="goToPage(page.component)"
        verticalAlignment="center"
        width="95%"
        height="50"
        color="#000000"

JamieCurnow

<template lang="html">
  <ScrollView>
    <StackLayout width="100%">
      <Label
        v-for="(page, i) in pages"
        @tap="goToPage(page.component)"
        verticalAlignment="center"
        width="95%"
        height="50"
        color="#000000"