clearHistory is removing the Frame component when the Frame is in a component template

[Julien-R44]

Version

2.2.0

Reproduction link

https://play.nativescript.org/?template=play-vue&id=eA0tz9

Platform and OS info

Nativescript-Vue 2.2.0 / Android 7.0

Steps to reproduce

My default Frame is in my App.vue component :

<template>
    <Frame>
        <Page>
            <StackLayout>
                <Label>App.vue</Label>
                <Button text="Button" @tap="onButtonTap" />
            </StackLayout>
        </Page>
    </Frame>
</template>

I'm creating my Vue root instance without inserting Frame like that :

new Vue({
  render: h => h(App),
}).$start()

And when i use a $navigateTo with clearHistory set as true, the default Frame from App.vue will be removed and i will not be able to navigate anymore.

I've created a reproduction link with Nativescript Playground so you can see what's is happening

What is expected?

The default frame has not to be deleted

What is actually happening?

The default frame is removed

[rigor789]

Looking at the code, this seems like a bug, however it can easily be worked around, either by defining the frame in main.js in the render function, or extracting the first page into a component, and rendering it that way: https://play.nativescript.org/?template=play-vue&id=eA0tz9&v=3

I have plans to improve Frames in general, and will investigate this further.

[Julien-R44]

Yes i found this workaround too, but i still wanted to report this bug.
Do you have begun work on supporting Vue Router ? There are some issues with manual routing.
Thanks you !

[rigor789]

No, VueRouter is not supported currently, and will not be for a while. You can use nativescript-vue-navigator as a minimalistic router that lets you keep track of the current route and lets you define routes in a central place.

[TemaSM]

@rigor789 how about transitions and something like <router-view> while changing routes?
I'm trying manual routing approach from nativescript-vue docs, but cannot implement this behavior:
Main app wrapper should stay in place with its styles (background image), and route change triggers only changing container's content (like <router-view>).
May you please give some tips on how to implement it with current nativescript-vue routing system?

[rigor789]

@TemaSM You can set the transition between pages, however I don't think any of the default/existing ones do what you're looking for. You can build a custom transition (I've never done it myself) based on this doc https://docs.nativescript.org/ui/ns-ui-widgets/frame#navigation-transitions (scroll to the "Custom Transitions" section).

[TemaSM]

@rigor789 thanks for tips and link. Already tried by this article, which mostly helped me, but app's screens/pages still slides as whole Frame (with background image) not as containers in Frame itself.

[rigor789]

@TemaSM you can do something like this: https://play.nativescript.org/?template=play-vue&id=Ltgbh6

Set the page background to transparent, and navigate the frame. The background color comes from a wrapping element.

[nativescript-vue-bot]

We are locking this issue because it has been closed for more than 14 days.

If the issue comes up again please open a new issue with additional details.