Nativescript-vue: NativeScript with Vue3 / CompositionApi

[AlexandruSerban142]

Hello, We are just about to start the development process of a web & mobile app and we decided that we will continue with Vue and Nativescript as they seem the best option for us. Vue 3 is about to be released in the upcoming months, coming with the new Vue Composition Api.

I have two questions:

1. Will Nativescript work directly with the new version of Vue that will be realease? If not, do you have plans for making Nativescript work with Vue3?

2. Right now there is a plugin gor Vue2 named "vue composition api" that delivers Vue3 syntax into Vue2 projects. Can we use the Vue Composition Api right now to start the development process with NativeScript?

Thanks!

[nativescript-vue-bot]

Your issue has been tagged as low priority because it did not follow our issue guidelines.

If you believe your issue should be higher priority please close this issue and create a new one
using the issue helper.

Thanks for your understanding.

[kaanguru]

Composition API is needed for long codes. I hope we will be able to use it.

[awulkan]

Any update on this? Is any work being done to have this project ready for Vue 3 when it's released? Are there any blockers?

[coffeeneed]

Also need an answer to this. I hope we will be able to continue "the old way", as we'll soon release our app as of todays tech. All information regarding this question is appreciated :)

[ashbeats]

Shouldn't this be considered high-priority? 3.0's composition api is finally allowing Vue to be consumed and managed in a purely functional manner away from the clunky options / oop approach.

[rigor789]

We're going for a full rewrite of NativeScript-Vue for Vue 3.0

That means, we'll utilize the custom renderer API that it exposes, as well as fully support all the Vue 3.0 features including the composition API.

I can't give an ETA, but hopefully soon after Vue 3.0 is released (not the current alphas)

[kabaluyot]

As long as it is backward compatible, were happy with nativescript-vue. Please pin this issue for easy reference. Thank you for all your efforts @rigor789 , et. al

[IlyaSemenov]

@vue/composition-api seems to work fine with nativescript-vue (at first glance).

[mannok]

how is the progress?

[rigor789]

https://github.com/rigor789/nativescript-vue-next

[shishamo]

Do you have any idea about then it can be released?

[brease-colin]

@vue/composition-api seems to work fine with nativescript-vue (at first glance).

I'm experimenting with this as well and I found one thing that does not work: template references (ref). Other stuff I've tried (computed, watch, 'normal' refs, lifecycle hooks) seem to work fine, including usage of external modules (like villus for graphql).

What's not working (crashes my emulator) is the following:

<template>
    <grid-layout ref=componentRef>
        <!-- -->
    </grid-layout>
</template>

setup() {
    const componentRef = ref<any>(null);

    return {
        componentRef,
    };
}

Error log

JS: [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'Symbol(Symbol.toStringTag)' of undefined"
JS:
JS: found in
JS:
JS: ---> <BCalendar> at components/BCalendar.vue
JS:        <Page>
JS:          <App> at components/App.vue
JS:            <Frame>
JS:              <Root>
System.err: An uncaught Exception occurred on "main" thread.
System.err: Unable to start activity ComponentInfo{nl.****.****/com.tns.NativeScriptActivity}: com.tns.NativeScriptException: Calling js method onCreate failed
System.err: TypeError: Cannot read property 'Symbol(Symbol.toStringTag)' of undefined
System.err: StackTrace:
System.err: java.lang.RuntimeException: Unable to start activity ComponentInfo{nl.****.****/com.tns.NativeScriptActivity}: com.tns.NativeScriptException: Calling js method onCreate failed
System.err: TypeError: Cannot read property 'Symbol(Symbol.toStringTag)' of undefined
System.err:     at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2325)
System.err:     at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2387)
System.err:     at android.app.ActivityThread.access$800(ActivityThread.java:151)
System.err:     at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1303)
System.err:     at android.os.Handler.dispatchMessage(Handler.java:102)      
System.err:     at android.os.Looper.loop(Looper.java:135)
System.err:     at android.app.ActivityThread.main(ActivityThread.java:5254)
System.err:     at java.lang.reflect.Method.invoke(Native Method)
System.err:     at java.lang.reflect.Method.invoke(Method.java:372)
System.err:     at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:903)
System.err:     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:698)
System.err: Caused by: com.tns.NativeScriptException: Calling js method onCreate failed
System.err: TypeError: Cannot read property 'Symbol(Symbol.toStringTag)' of undefined
System.err:     at com.tns.Runtime.callJSMethodNative(Native Method)
System.err:     at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1286)
System.err:     at com.tns.Runtime.callJSMethodImpl(Runtime.java:1173)       
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:1160)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:1138)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:1134)
System.err:     at com.tns.NativeScriptActivity.onCreate(NativeScriptActivity.java:19)
System.err:     at android.app.Activity.performCreate(Activity.java:5990)
System.err:     at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1106)
System.err:     at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2278)
System.err:     ... 10 more
ActivityManager: Process nl.****.**** (pid 24182) has died

I understand if this is something for nativescript-vue-next though, but maybe someone knows of a nice workaround.

[IlyaSemenov]

@brease-colin I've stumbled across the same problem, my workaround was:

<script lang="ts">
export default defineComponent({
       setup(_, { refs }) {
               let drawer: RadSideDrawer

               // workaround for refs
               // for some reason string refs didn't work per
               // https://github.com/vuejs/composition-api#template-refs
               const $refs = refs as {
                       drawer: Vue<RadSideDrawer>
               }

               onMounted(() => {
                       drawer = $refs.drawer.nativeView
               })

               // ...
       },
})
</script>

<template>
       <RadSideDrawer ref="drawer">
               <slot />
       </RadSideDrawer>
</template>

(I then ditched RadSideDrawer for nativescript-vue-multi-drawer which doesn't need a ref to operate).

[brease-colin]

@IlyaSemenov Thanks for sharing, that should work nicely indeed! 👍

[lovetingyuan]

Custom Renderer API provided by Vue 3 is most important feature for NativeScript.

[luisfer7192]

Hi @rigor789,
Do you have any idea about then it can be released?

[Pckool]

It seems like there is a public npm package of this new version

[rigor789]

I showed a demo and it's published as an early preview, undocumented yet: https://www.youtube.com/watch?v=QuEEF-QvfmU

[Linkontoask]

Great, waiting for release

[HakobiDev]

+1 Hoping to bring it to life it seems the author quoting
"(off-topic) progress has been slow, as I frankly didn't have time/motivation to do it.".

Still missing the new features of Vue 3(Composition API) for big codebase app.
No specific ETA for NS-V3, sad but true.

I know it is hard to rewrite the whole NS-V2 to V3. Hopefully more contributors to all NS-V2 users for NS Vue 3 version.

[deindesignpl]

+1 Hoping to bring it to life as well

[andresilva-cc]

Any news on this?