designemail
diff --git a/‎platform/nativescript/runtime/components/frame.js
Lines changed: 0 additions & 1 deletion b/‎platform/nativescript/runtime/components/frame.js
Lines changed: 0 additions & 1 deletion
diff --git a/‎samples/app/app-with-frame.js
Lines changed: 20 additions & 23 deletions b/‎samples/app/app-with-frame.js
Lines changed: 20 additions & 23 deletions
diff --git a/‎samples/app/app-with-shared-actionbar.js
Lines changed: 49 additions & 0 deletions b/‎samples/app/app-with-shared-actionbar.js
Lines changed: 49 additions & 0 deletions
diff --git a/‎samples/app/package.json
Lines changed: 1 addition & 1 deletion b/‎samples/app/package.json
Lines changed: 1 addition & 1 deletion
diff --git a/‎samples/package.json
Lines changed: 10 additions & 10 deletions b/‎samples/package.json
Lines changed: 10 additions & 10 deletions
@@ -2,7 +2,6 @@ import { setFrame, getFrame, deleteFrame } from '../../util/frame'
 import { isHMRChecking, resetHMRChecking } from '../../util/hmr'
 import { isAndroid, isIOS } from 'tns-core-modules/platform'
 import { ios as iosUtils } from 'tns-core-modules/utils/utils'
-import { _setAndroidFragmentTransitions } from 'tns-core-modules/ui/frame/fragment.transitions'
 
 let idCounter = 1
 
 
@@ -1,31 +1,32 @@
 const Vue = require('./nativescript-vue')
+const VueDevtools = require('nativescript-vue-devtools')
+
+Vue.use(VueDevtools)
 
 Vue.config.silent = false
 Vue.config.debug = true
 
-const createPage = title =>
-  new Vue({
-    template: `<Page><Foo/></Page>`,
-    components: {
-      Foo: {
-        template: `<Label text="${title}"/>`,
-        created() {
-          this.intv = setInterval(
-            () => console.log(`[${title}] INTERVAL FIRED.`),
-            1000
-          )
-        },
-        destroyed() {
-          clearInterval(this.intv)
-        }
+const createPage = title => ({
+  template: `<Page><Foo/></Page>`,
+  components: {
+    Foo: {
+      template: `<Label text="${title}"/>`,
+      created() {
+        this.intv = setInterval(
+          () => console.log(`[${title}] INTERVAL FIRED.`),
+          1000
+        )
+      },
+      destroyed() {
+        clearInterval(this.intv)
       }
     }
-  }).$mount().$el.nativeView
+  }
+})
 
 new Vue({
   template: `
-    <Frame ref="frame" 
-        @navigated="log('navigated')"
+    <Frame @navigated="log('navigated')"
         @navigatedBack="log('navigatedBack')"
     >
       <Page><Button text="Page" @tap="navigate" /></Page>
@@ -34,11 +35,7 @@ new Vue({
 
   methods: {
     navigate() {
-      this.$refs.frame.navigate({
-        create() {
-          return createPage('test')
-        }
-      })
+      this.$navigateTo(createPage('test'))
     },
     log(name) {
       console.log('FRAME EVENT: ' + name)
 
@@ -0,0 +1,49 @@
+const Vue = require('./nativescript-vue')
+const VueDevtools = require('nativescript-vue-devtools')
+
+Vue.use(VueDevtools)
+
+Vue.config.silent = false
+Vue.config.debug = true
+
+let id = 1
+
+const page = name => ({
+  template: `
+    <Page actionBarHidden="true">
+        <GridLayout>
+            <Label text="${name}" />
+        </GridLayout>
+    </Page>
+  `
+})
+
+new Vue({
+  template: `
+    <GridLayout rows="auto, *">
+      <GridLayout row="0" columns="auto, *, auto" padding="10" background="#191E38" color="#ffffff">
+        <Label col="0" text="<<<" @tap="backward"/>
+        <Label col="1" text="Title" marginLeft="20" />
+        <Label col="2" text=">>>" @tap="forward" />
+      </GridLayout>
+      
+      <ContentView  row="1">
+        <Frame>
+          <HomePage />
+        </Frame>
+      </ContentView>
+    </GridLayout>  
+  `,
+  methods: {
+    forward() {
+      this.$navigateTo(page('OtherPage ID:' + id++))
+    },
+
+    backward() {
+      this.$navigateBack()
+    }
+  },
+  components: {
+    HomePage: page('Home')
+  }
+}).$start()
@@ -1,5 +1,5 @@
 {
-  "main": "app-with-all-components.js",
+  "main": "app-with-shared-actionbar.js",
   "name": "nativescript-template-tutorial",
   "version": "1.0.1"
 }
@@ -4,24 +4,24 @@
   "readme": "NativeScriptVue Samples Application",
   "nativescript": {
     "id": "org.nativescript.application",
-    "tns-ios": {
-      "version": "4.2.0"
-    },
     "tns-android": {
-      "version": "4.2.0"
+      "version": "5.3.0"
+    },
+    "tns-ios": {
+      "version": "5.3.0"
     }
   },
   "dependencies": {
-    "@vue/devtools": "^5.0.0-beta.3",
-    "nativescript-socket.io": "^0.9.0",
+    "@vue/devtools": "^5.0.6",
+    "nativescript-pager": "^9.4.0",
+    "nativescript-socketio": "^3.2.1",
     "nativescript-theme-core": "^1.0.4",
-    "nativescript-toast": "^1.4.6",
+    "nativescript-toasty": "^1.3.0",
     "nativescript-ui-gauge": "^3.7.1",
     "nativescript-ui-sidedrawer": "^4.3.0",
     "nativescript-vue-devtools": "^1.1.0",
-    "tns-core-modules": "^4.2.0",
+    "tns-core-modules": "^5.3.1",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1"
   }
-}
+}