Starting page

[Cersin]

Hi, how to set start page? I have something like this: <Frame ~mainContent ref="drawerMainContent"> <Home /> </Frame> But i want to start with Routes.js, like <RouterView></RouterView> in normal app

[MattCCC]

Hi / cześć!

In the main *.vue file of your app try something like:

        <Frame ref="myFrameId"
            @loaded="onMainFrameLoaded"
        >
            <YourPageComponent />
        </Frame>

Where myFrameId is your frame Id, that you specify when calling $routeTo. Then onMainFrameLoaded is a callback when everything is ready.

But i want to start with Routes.js, like in normal app

I'm not sure I understand this part. You can use routes.js. Just import that file with const routes as per example, in wherever you require it.

[Cersin]

@MattCCC siemka, The problem is that when I start inside Frame I put <Home> component, but I would like to load <Login> if I have an authentication error, and the first time the route.beforeEach doesn't even start. I cant properly configure it, demo will be cool

[MattCCC]

I'm not quite sure about your exact use case. I'll try to set up a demo in following days, and then make a new release. I have a bunch of small bug fixes here and there to include as well. Then we can follow up on that so let's keep the thread open 👍

and the first time the route.beforeEach doesn't even start

Does it load in standard web vue-router? If it does, then we may have an issue there.

[Cersin]

Thanks, i will wait for a demo

[Cersin]

any news? :D

[Cersin]

@MattCCC there is now beta version with vue 3 support https://github.com/nativescript-vue/nativescript-vue

[vallemar]

Hi @MattCCC , the repository @Cersin is talking about was an effort to add this router to Vue3 when we were testing dominative. We got it working and now it works with ns-vue 3 beta as well. @MattCCC Would you commit to merging the changes or do we keep it in this fork?

@Cersin an example of what you want:

// app.ts
import { createApp } from 'nativescript-vue';
import App from './App.vue';
import {router} from "~/plugins/router";
const app = createApp(App);
app.use(router)
app.start();

// /plugins/router.ts
import {createRouter} from "router-vue-native";
import Home from "~/views/Home.vue";
import Login from "~/views/Login.vue";

const routes = [
    {
        path: "/",
        component: Home,
    },
    {
        path: "/login",
        component: Login,
    }
];

const router = createRouter(
    {routes},
);

export {
    router
}

// App.vue
<template>
  <RouterView defaultRoute="/login"></RouterView>
</template>

// OR

<script setup lang="ts">
const getDefaultRouteExample = () => {
  if (isLoginUser) {
    return "/login"
  } else {
    return "/"
  }
}
</script>
<template>
  <RouterView :defaultRoute="getDefaultRouteExample"></RouterView>
</template>

I want to update the readme so that it has these examples but first I would like to know in which repository and package this plugin will end up 🤣

Note: this is the fork https://github.com/ammarahm-ed/nativescript-vue-router-extended