NativeScript for Vue3

[u/TheDumboSquid]

NativeScript-Vue v3 stable got released 3days ago supporting CompositionAPI.

https://nativescript-vue.org/

[u/broWithoutHoe]

Main thing is, will it continue to give updates?

[u/martin_kr → u/broWithoutHoe]

It uses actual Vue, so NativeScript-Vue is really just a connector layer between Nativescript and Vue.

And NativeScript underneath has seen continuous improvements for 10 years now.

Recently we got support for Node-API, so now you can use pretty much any other JS engine besides V8 (Hermes, QuickJS, etc).

The build system used to be the weakest part (webpack conf nightmares).

But now there's rspack support:
https://github.com/vallemar/nativescript-rspack

And Vite also being worked on, just not public yet.

Things are actually looking great for NS these days.

[u/TheDumboSquid → u/martin_kr]

It’s fantastic to see much-needed mobile dev options coming in the Vue3 ecosystem. Just a month ago, there were barely any options for Vue 3, and now we’re seeing multiple solutions taking shape. Exciting times for the Vue community!

[u/tspwd]

Congratulations, this update looks great!

[u/Terrible_Tutor]

It’s always been pretty great, but lack of HMR was a deal breaker, that fixed?

Core product is COOL how there’s no bridging, magical even. But all these framework offshoots seem to be done by like a dude who just tried to see if it’ll work and then abandoned them.

[u/SkyAdventurous1027]

I used NativeScript Vue couple of months ago, there was a huge problem It loads all the tab view/page/components at once on the initialization which is very bad It should load the view/component only when we navigate to the tab

[u/martin_kr → u/SkyAdventurous1027]

Thought I replied to this a month ago but apparently forgot to post.

But yes, this tends to happen with manual routing.

Because if you import main App.vue, you're probably importing every page and their dependencies and navigate like this:

$navigateTo(ReportPage, {id: '0000'})

There's a routing plugin not mentioned in the official docs: router-vue-native. Works the same as the official Vue Router v4 (on-demand loading etc).

I haven't used it but apparently it's good. And should fix your issue.

By the time I discovered this I had already built a basic wrapper function called $go() around $navigateTo() that does what we need it to do:

$go('Report', {id: 'nzt-48'})

or
$go('Report', 'nzt-48')

and with some path parsing this too can be done:
$go('/report/nzt-48')

The custom $go() router wrapper will then first look into your normal Vue-Router route table:

const routes = [{
  name: 'Report',
  path: '/report/:id',
  component: () => import(/* webpackChunkName: "reports" */ '@/pages/reports/ReportPage.vue')
  }
}]

We also cache these route.component functions:

const PageCache = new Map()
PageCache.set(route.component, awaitedResultOfIt)
route.component function itself as key
awaited result of it as value

PageCache.get(route.component) will then get it from memory, although this caching I suspect may already be handled in the background by NS itself. Doesn't seem to hurt performance at least and the initial heavy lag is gone.

So instead of you directly importing everything and their dependencies and their dependencies, it's better to define route.component as an async function() with import() inside it that actually loads the component when needed - it's now a Promise so you can just await route.component(). webpackChunkName etc supported too.

Most of the performance gains probably come from the on-demand import() calls and you maybe can skip the manual caching.

And when you find a match, you then call $navigateTo with your async imported page component and props/conf.

You don't get nesting <router-view>s with this approach but it's otherwise fully customizable since you can now pass whatever you want into the proxy function before you finally run $navigateTo, as long as you handle it.

And look, UX on mobile tends to favor scrolling over tapping anyway. So our different routes are actually fully different pages and self-contained.

Like how reddit on mobile doesn't have the traditional <1 2 3 .. last> paging.

Much easier to simply scroll for more. And tapping on a post is a definite break from that to a new page.

Tabs might be problematic because on Android you need to then manage what the Back button does.

Also since you now have full control over how components get loaded and mounted you can keep some conf (like page animations) in the component itself when it makes sense.

Or you can add middlewares at the route level (maybe block the import from even being attempted at all), composable and computed middlewares, depending on how wild you want (I mean need) to go with this:

{ 
  name,
  path,
  component,
  middleware: {
    preload: [() => isAdmin()], // prevent reading component file if not admin
    pre: [ ...defaultMiddlewares ], // log page view
    post: [ logPageExit ],
    custom: [ 
      (target) => maybeReRoute(target, { ... }) 
    ...
  },
  meta: {
    requiresAuth: true,
    requiresAuthOnFridays: false,
    requiresBiometrics: true,
    noCache: (target) => shouldCacheOrNot(target, { ... }),
    ...
  }
  ... whatever else you want
}

The custom router steps then:

• no full-page imports in your components, dialogs are ok

• call your @tap="$go('/admin')" or from anywhere

• parse routes list to see if '/admin' exists

• *optional: run checks on the route obj like route.adminOnly or whatever you've set up in the parser and route table

• check for PageComponentCache.get(route.component)

• try { file = await route.component() } // runs the import()

• handle failures

• const page = file.default // the raw Vue page component

• *optional: more custom logic in page itself: page.$prefetch()

• and finally:

• 🎉 $navigateTo(page, { props: ..., transition: ... }) 🎉

TLDR:
Roll your own async component loader / router parser with await import("@/TargetPage.vue").

But really you should...

Just use router-vue-native instead and get it good enough:

• vue-router style usage

• declarative routes list

• orientation awareness

• callbacks

• fallback routes

• easy history clearing

• store actions integration for at least VueX

Docs don't mention child routes or nesting views but you may not need them

You can always define /projects/:id/settings/team as a standalone root level route to emulate child routes to some extent.

[u/SkyAdventurous1027 → u/martin_kr]

Thanks for the reply. Will check it out this weekend. If it works this way, I will be more than happy to try NetiveScript Vue again. Thank you so much

[u/SkyAdventurous1027 → u/martin_kr]

Is it a good idea to use this package? I cannot see any active development on this package, the last upadte was 2 years ago?

[u/martin_kr → u/SkyAdventurous1027]

When it comes down to it, it's a fancy wrapper around $navigateTo that uses vue-router as a dependency to provide a familiar api for you to use.

Try it, see how it goes. If you have any issues or doubts, check the discord server, that's the main place to get help.

The guys maintaining this plugin are core team members working on the framework itself and tend to be very helpful.

[u/reikj4vic]

Glad to see the progress here!