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!

I installed nativescript-vue and I get an error running both npm run watch:ios and npm run watch:android

fullstack-mobile
> npm run watch -- --env.android


> [email protected] watch /Users/username/projects/chovy/fullstack/fullstack-mobile
> webpack --watch --env.tnsAction run "--env.android"

info: Copying NativeScript plugins to template dependencies...
info: Preparing NativeScript application from template...
npm WARN fullstack-mobile@ No repository field.

info: Bundling application for android...

Webpack is watching the files…

Executing post-build scripts
info: Running NativeScript application...
error: uncaughtException: 127 date=Sun Jun 10 2018 16:27:16 GMT-0700 (PDT), pid=71776, uid=501, gid=20, cwd=/Users/username/projects/chovy/fullstack/fullstack-mobile, execPath=/Users/username/.nvm/versions/node/v10.3.0/bin/node, version=v10.3.0, argv=[/Users/username/.nvm/versions/node/v10.3.0/bin/node, /Users/username/projects/chovy/fullstack/fullstack-mobile/node_modules/.bin/webpack, --watch, --env.tnsAction, run, --env.android], rss=200503296, heapTotal=170078208, heapUsed=116691416, external=1601018, loadavg=[2.681640625, 2.453125, 2.33056640625], uptime=621168, trace=[], stack=undefined
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] watch: `webpack --watch --env.tnsAction run "--env.android"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] watch script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/username/.npm/_logs/2018-06-10T23_27_16_698Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] watch:android: `npm run watch -- --env.android`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] watch:android script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/username/.npm/_logs/2018-06-10T23_27_16_741Z-debug.log

I'm using node v10

Version

2.4.0

Reproduction link

https://play.nativescript.org/?template=play-js&id=xsfX&v=4

Platform and OS info

vue cli 4.1.1, Windows 10 64, TNS 6.2.2, Android 9

Steps to reproduce

I upgraded to 6.2.2 a couple of days ago and everything worked well until now.

I only have this: showUsers() { this.$navigateTo(this.users); },

And the button look like this:

<GridLayout columns="130, *" rows="auto" class="menu-item" @tap="showUsers()">
<Image col="0" src="~/assets/images/app/menu-icons/users.png" width="40" horizontalAlignment="left" />
<Label col="1" verticalAlignment="center">User summary</Label>

In other words, nothing extraordinary at all. This is very worrying for me, as my app is not working at the moment and a lot of people are dependent on updates. Very critical for me and I guess for everyone else.

User page look like this:

What is expected?

It's expected that the page changes and button working.

What is actually happening?

Nothing happens. Absolutely nothing. The consol says: JS: 'getFrameById() is deprecated. Use Frame.getFrameById() instead.'

I can't stress this enough. Please help me out here! PS I was not abled to reproduce this on the playground, thus pasting a "bogus" URL in that input field. I'm so sorry. I hope you can help me out in any case.

This is a discussion thread for implementing VueRouter with nativescript 4.0.

The discussion has been started at https://github.com/nativescript-vue/nativescript-vue/issues/211 but moved here for visibility.

Prior discussion about the router can be found here: https://github.com/nativescript-vue/nativescript-vue/issues/119

Hi,

We are testing the next version of nativescript-vue and the webpack tag of NativeScript in preparation for 6.0.0. When changing running an app on ios tns run ios with the following setup the below exception is thrown after you make changes to the app and it is livesynced.

Setup:

1. Install webpack tag of NativeScript globally: npm i -g nativescript@webpack 2.Install webpack tag of nativescript-dev-webpack : npm i nativescript-dev-webpack@webpack
2. Install next tag of nativescript-vue : npm i nativescript-vue@next
3. Run an the app on iOS: tns run ios
4. App is synced and started correctly
5. Make a change to the source of the app to trigger livesync
6. Changes are synced, app is restarted and when it start it crashes

mcsofamiorkov:demo-vue amiorkov$ tns run ios Searching for devices... Preparing project... Found peer TypeScript 3.4.5 Bundling application for entryPath ./main... File change detected. Starting incremental webpack compilation...

webpack is watching the files…

Hash: 9b9444bead59215a9361 Version: webpack 4.27.1 Time: 27920ms Built at: 11/06/2019 16:39:37 Asset Size Chunks Chunk Names bundle.js 503 KiB bundle [emitted] bundle package.json 255 bytes [emitted]
runtime.js 71.4 KiB runtime [emitted] runtime tns_modules/tns-core-modules/inspector_modules.js 763 bytes tns_modules/tns-core-modules/inspector_modules [emitted] tns_modules/tns-core-modules/inspector_modules vendor.js 6.65 MiB vendor [emitted] vendor Entrypoint bundle = runtime.js vendor.js bundle.js Entrypoint tns_modules/tns-core-modules/inspector_modules = runtime.js vendor.js tns_modules/tns-core-modules/inspector_modules.js [../../src/ui-listview.ts] /Users/amiorkov/Desktop/Work/nativescript-ui-listview/src/ui-listview.ts 84.8 KiB {bundle} [built] [../../src/vue/component.ts] /Users/amiorkov/Desktop/Work/nativescript-ui-listview/src/vue/component.ts 9.6 KiB {bundle} [built] [../../src/vue/index.ts] /Users/amiorkov/Desktop/Work/nativescript-ui-listview/src/vue/index.ts 893 bytes {bundle} [built] [./ sync ^./app.(css|scss|less|sass)$] . sync nonrecursive ^./app.(css|scss|less|sass)$ 174 bytes {bundle} [built] [./ sync recursive (root|page).(xml|css|js|ts|scss)$] . sync (root|page).(xml|css|js|ts|scss)$ 160 bytes {bundle} [built] [./examples/FirstVisibleIndex.ts] 1.5 KiB {bundle} [built] [./examples/GettingStarted.ts] 1.4 KiB {bundle} [built] [./examples/GettingStartedHo.ts] 1.37 KiB {bundle} [built] [./examples/GridLayout.ts] 1.43 KiB {bundle} [built] [./examples/Group.ts] 1.47 KiB {bundle} [built] [./examples/GroupScrollTo.ts] 2.16 KiB {bundle} [built] [./examples/GroupWithHeaderFooter.ts] 2.43 KiB {bundle} [built] [./examples/index.ts] 1.67 KiB {bundle} [built] [./main.ts] 1.77 KiB {bundle} [built] [./views/index.ts] 140 bytes {bundle} [built] + 181 hidden modules Webpack compilation complete. Watching for file changes. Webpack build done! Project successfully prepared (ios) Successfully transferred bundle.js on device CA4FE147-D326-444F-96CD-7F74BC5D2AA6. Successfully transferred package.json on device CA4FE147-D326-444F-96CD-7F74BC5D2AA6. Successfully transferred runtime.js on device CA4FE147-D326-444F-96CD-7F74BC5D2AA6. Successfully transferred tns_modules on device CA4FE147-D326-444F-96CD-7F74BC5D2AA6. Successfully transferred tns-core-modules on device CA4FE147-D326-444F-96CD-7F74BC5D2AA6. Successfully transferred inspector_modules.js on device CA4FE147-D326-444F-96CD-7F74BC5D2AA6. Successfully transferred vendor.js on device CA4FE147-D326-444F-96CD-7F74BC5D2AA6. Restarting application on device CA4FE147-D326-444F-96CD-7F74BC5D2AA6... Successfully synced application org.nativescript.demovueradlistview on device CA4FE147-D326-444F-96CD-7F74BC5D2AA6. CONSOLE INFO file:///app/vendor.js:135:32: HMR: Hot Module Replacement Enabled. Waiting for signal. CONSOLE LOG file:///app/vendor.js:10585:14: 'NativeScript-Vue has "Vue.config.silent" set to true, to see output logs set it to false.' File change detected. Starting incremental webpack compilation... Hash: 5d763912313423b56751 Version: webpack 4.27.1 Time: 4240ms Built at: 11/06/2019 16:40:49 Asset Size Chunks Chunk Names 9b9444bead59215a9361.hot-update.json 48 bytes [emitted]
bundle.9b9444bead59215a9361.hot-update.js 224 KiB bundle [emitted] bundle bundle.js 503 KiB bundle [emitted] bundle runtime.js 71.4 KiB runtime [emitted] runtime tns_modules/tns-core-modules/inspector_modules.js 763 bytes tns_modules/tns-core-modules/inspector_modules [emitted] tns_modules/tns-core-modules/inspector_modules

• 1 hidden asset Entrypoint bundle = runtime.js vendor.js bundle.js bundle.9b9444bead59215a9361.hot-update.js Entrypoint tns_modules/tns-core-modules/inspector_modules = runtime.js vendor.js tns_modules/tns-core-modules/inspector_modules.js [../../src/ui-listview.ts] /Users/amiorkov/Desktop/Work/nativescript-ui-listview/src/ui-listview.ts 84.8 KiB {bundle} [built] [./ sync ^./app.(css|scss|less|sass)$] . sync nonrecursive ^./app.(css|scss|less|sass)$ 174 bytes {bundle} [built] [./ sync recursive (root|page).(xml|css|js|ts|scss)$] . sync (root|page).(xml|css|js|ts|scss)$ 160 bytes {bundle} [built] [./examples/FirstVisibleIndex.ts] 1.5 KiB {bundle} [built] [./examples/index.ts] 1.67 KiB {bundle} [built]
  • 191 hidden modules Webpack compilation complete. Watching for file changes. Webpack build done! Successfully transferred bundle.9b9444bead59215a9361.hot-update.js on device CA4FE147-D326-444F-96CD-7F74BC5D2AA6. Successfully transferred 9b9444bead59215a9361.hot-update.json on device CA4FE147-D326-444F-96CD-7F74BC5D2AA6. NativeScript debugger has opened inspector socket on port 50328 for org.nativescript.demovueradlistview. Refreshing application on device CA4FE147-D326-444F-96CD-7F74BC5D2AA6... CONSOLE LOG file:///app/vendor.js:23864:12: 'Loading inspector modules...' CONSOLE LOG file:///app/vendor.js:23874:12: 'Finished loading inspector modules.' NativeScript debugger attached. CONSOLE INFO file:///app/vendor.js:135:32: HMR: Checking for updates to the bundle with hmr hash 9b9444bead59215a9361. CONSOLE WARN file:///app/vendor.js:136:32: HMR: Ignored an update to unaccepted module: CONSOLE WARN file:///app/vendor.js:136:32: HMR: ➭ ../../src/ui-listview.ts CONSOLE WARN file:///app/vendor.js:136:32: HMR: ➭ ../../src/vue/index.ts CONSOLE WARN file:///app/vendor.js:136:32: HMR: ➭ ./main.ts CONSOLE ERROR file:///app/vendor.js:137:34: HMR: Cannot apply update with hmr hash 9b9444bead59215a9361. CONSOLE ERROR file:///app/vendor.js:137:34: HMR: Aborted because ../../src/ui-listview.ts is not accepted Update propagation: ../../src/ui-listview.ts -> ../../src/vue/index.ts -> ./main.ts Restarting application on device CA4FE147-D326-444F-96CD-7F74BC5D2AA6... NativeScript debugger detached. Successfully synced application org.nativescript.demovueradlistview on device CA4FE147-D326-444F-96CD-7F74BC5D2AA6. CONSOLE INFO file:///app/vendor.js:135:32: HMR: Hot Module Replacement Enabled. Waiting for signal. CONSOLE INFO file:///app/vendor.js:135:32: HMR: Checking for updates to the bundle with hmr hash 9b9444bead59215a9361. CONSOLE WARN file:///app/vendor.js:136:32: HMR: Ignored an update to unaccepted module: CONSOLE WARN file:///app/vendor.js:136:32: HMR: ➭ ../../src/ui-listview.ts CONSOLE WARN file:///app/vendor.js:136:32: HMR: ➭ ../../src/vue/index.ts CONSOLE WARN file:///app/vendor.js:136:32: HMR: ➭ ./main.ts CONSOLE ERROR file:///app/vendor.js:137:34: HMR: Cannot apply update with hmr hash 9b9444bead59215a9361. CONSOLE ERROR file:///app/vendor.js:137:34: HMR: Aborted because ../../src/ui-listview.ts is not accepted Update propagation: ../../src/ui-listview.ts -> ../../src/vue/index.ts -> ./main.ts CONSOLE LOG file:///app/vendor.js:10585:14: 'NativeScript-Vue has "Vue.config.silent" set to true, to see output logs set it to false.' ***** Fatal JavaScript exception - application has been terminated. ***** Native stack trace: 1 0x10d7a9cdf NativeScript::reportFatalErrorBeforeShutdown(JSC::ExecState*, JSC::Exception*, bool) 2 0x10d7dfee0 NativeScript::FFICallbackNativeScript::ObjCMethodCallback::ffiClosureCallback(ffi_cif*, void*, void**, void*) 3 0x10e104956 ffi_closure_unix64_inner 4 0x10e10537a ffi_closure_unix64 5 0x1109d0a6f _CFXRegistrationPost 6 0x1109d07b3 ___CFXNotificationPost_block_invoke 7 0x110ab45e2 -[_CFXNotificationRegistrar find:object:observer:enumerator:] 8 0x1109d0101 _CFXNotificationPost 9 0x10e8fbeaf -[NSNotificationCenter postNotificationName:object:userInfo:] 10 0x111ecefab -[UIApplication _callInitializationDelegatesForMainScene:transitionContext:] 11 0x111ed40c6 -[UIApplication _runWithMainScene:transitionContext:completion:] 12 0x1117196d6 __111-[__UICanvasLifecycleMonitor_Compatability _scheduleFirstCommitForScene:transition:firstActivation:completion:]_block_invoke 13 0x111721fce +[_UICanvas _enqueuePostSettingUpdateTransactionBlock:] 14 0x1117192ec -[__UICanvasLifecycleMonitor_Compatability _scheduleFirstCommitForScene:transition:firstActivation:completion:] 15 0x111719c48 -[__UICanvasLifecycleMonitor_Compatability activateEventsOnly:withContext:completion:] 16 0x111717fba __82-[_UIApplicationCanvas _transitionLifecycleStateWithTransitionContext:completion:]_block_invoke 17 0x111717c71 -[_UIApplicationCanvas _transitionLifecycleStateWithTransitionContext:completion:] 18 0x11171c9b6 __125-[_UICanvasLifecycleSettingsDiffAction performActionsForCanvas:withUpdatedScene:settingsDiff:fromSettings:transitionContext:]_block_invoke 19 0x11171d610 _performActionsWithDelayForTransitionContext 20 0x11171c71d -[_UICanvasLifecycleSettingsDiffAction performActionsForCanvas:withUpdatedScene:settingsDiff:fromSettings:transitionContext:] 21 0x1117216d0 -[_UICanvas scene:didUpdateWithDiff:transitionContext:completion:] 22 0x111ed29a8 -[UIApplication workspace:didCreateScene:withTransitionContext:completion:] 23 0x111a89dfa -[UIApplicationSceneClientAgent scene:didInitializeWithEvent:completion:] 24 0x11ab25125 -[FBSSceneImpl _didCreateWithTransitionContext:completion:] 25 0x11ab2eed6 __56-[FBSWorkspace client:handleCreateScene:withCompletion:]_block_invoke_2 26 0x11ab2e700 __40-[FBSWorkspace _performDelegateCallOut:]_block_invoke 27 0x110fd5d02 _dispatch_client_callout 28 0x110fd8d41 _dispatch_block_invoke_direct 29 0x11ab60146 FBSSERIALQUEUE_IS_CALLING_OUT_TO_A_BLOCK 30 0x11ab5fdfe -[FBSSerialQueue _performNext] 31 0x11ab60393 -[FBSSerialQueue _performNextFromRunLoopSource] JavaScript stack trace: 1 getFrameInstance@file:///app/vendor.js:9248:24 2 mounted@file:///app/vendor.js:9354:31 3 invokeWithErrorHandling@file:///app/vendor.js:3871:61 4 callHook@file:///app/vendor.js:7083:30 5 insert@file:///app/vendor.js:6015:15 6 invokeInsertHook@file:///app/vendor.js:7674:34 7 patch@file:///app/vendor.js:7899:21 8 _update@file:///app/vendor.js:6800:28 9 updateComponent@file:///app/vendor.js:6929:17 10 get@file:///app/vendor.js:4373:29 11 Watcher@file:///app/vendor.js:4360:48 12 mountComponent@file:///app/vendor.js:6936:14 13 @file:///app/vendor.js:14449:16 14 notify@file:///app/vendor.js:19045:23 15 @[native code] 16 notifyAppStarted@file:///app/vendor.js:15149:32 17 didFinishLaunchingWithOptions@file:///app/vendor.js:15140:26 18 @[native code] 19 onReceive@file:///app/vendor.js:15012:28 20 UIApplicationMain@[native code] 21 _start@file:///app/vendor.js:15335:22 22 run@file:///app/vendor.js:15377:9 23 $start@file:///app/vendor.js:14452:18 24 @file:///app/bundle.js:4426:<…> JavaScript error: file:///app/vendor.js:9248:24: JS ERROR TypeError: undefined is not an object (evaluating 'frame.id')

Related to #3

We should support .vue files, since they are the reason (at least for me) that make vue awesome!

Decide if .vue files can be used with JIT compilation, or only with AOT

Version

2.0.0-alpha.1

Reproduction link

https://github.com/odai-alali/radlistview-test

Platform and OS info

Android 7.0 / NativeScript 4.1 / Windows 10

Steps to reproduce

run the application

What is expected?

RadListView to be rendered

What is actually happening?

render is wrong

Version

1.3.2-rc.3

Reproduction link

https://github.com/msaelices/nativescript-vue-android-event-issue

Platform and OS info

Android 7.0 / NativeScript 3.4.1 / Ubuntu Xenial

Steps to reproduce

1. vue init nativescript-vue/vue-cli-template myproject

2. Select default options: no vue-router, no vuex

3. Add this code to the src/main.js file:

# after import HelloWorld from './components/HelloWorld';
const application = require('tns-core-modules/application')

application.android.on(application.AndroidApplication.activityStartedEvent, args => {
  console.log('activityStarted event called')
})

What is expected?

See the activityStarted event called message.

What is actually happening?

The console.log sentence is not reached. Even if you change the console.log to a throw Error('Foo') the error is not raised so that function is never reached.

The issue is only happening with the vue-cli-template, which uses webpack for building the bundle. There are no issues with the nativescript-vue-template.

I'm still considering diving deep into trying to use this instead of React Native since my website is fully built-out with vue components already.

But one thing that isn't clear is how your custom renderer deals with html and css. I imagine there's a limit to how much translation you can do between html/css and what nativescript uses for visual elements. So a project who's vue components are heavily tied in to html that's been positioned and styled using bootstrap grids for example.. most or all of that would be lost right? And you'd end up being able to re-use most of the vue logic but would have to replace the layout part by something more native to nativescript?

Am I understanding that correctly?

So instead of

export default {
   data
   methods
   ...
}

If I instead do

export default Vue.extend({
   data
   methods
   ...
})

Then the template is not loaded and I get You are running a runtime-only build of Vue warning. (Which is supposed to happen if template is string, or el is id, and no render function exists)

Probably is a similar issue to his one: https://github.com/nativescript-vue/nativescript-vue/issues/24 My code works fine on android but it crashes on iOS

(Foundation) *** Assertion failure in -[UIGestureGraphEdge initWithLabel:sourceNode:targetNode:directed:], /BuildRoot/Library/Caches/com.apple.xbs/Sources/UIKit_Sim/UIKit-3698.33.6/Source/GestureGraph/UIGestureGraphEdge.m:25

Android Sample Running:

IOS Sample Crashing

The code is:

    <TabViewItem title="Documentos">
        <ScrollView>
            <tarefas :lista-tarefas="tarefas.DOCUMENTOS"/>
        </ScrollView>
    </TabViewItem>

Inside the 'tarefas' component:

<template>
    <FlexboxLayout flexDirection="column">
        <StackLayout v-for="item in ListaTarefas" :key="item.ID_TAREFA" class="item">

            <CardView class="card wd-100" radius="0" shadowOffsetWidth="0"
                      shadowOffsetHeight="0" shadowOpacity="0" shadowRadius="0" >
                <FlexboxLayout flexDirection="row">
                    <StackLayout class="barra-situacao" :class="cardStatus(item, true)"></StackLayout>

                    <FlexboxLayout flexDirection="column">
                        <StackLayout class="icone-tarefa wd-30" verticalAlignment="center">

                            <StackLayout v-if="item.TIPO === DOCUMENTO">
                                <image src="~/images/ic_documento.png" class="wd-40"/>
                                <label text="Documento" class="text-center" textWrap="true"/>
                            </StackLayout>

                            <StackLayout v-if="item.TIPO === ORDEM_SERVICO">
                                <image src="~/images/ic_ordem_servico.png" class="wd-40"/>
                                <label text="Ordem de Serviço" class="text-center" textWrap="true"/>
                            </StackLayout>

                            <StackLayout v-if="item.TIPO === PROCESSO">
                                <image src="~/images/ic_processo.png" class="wd-40"/>
                                <label text="Processo" class="text-center" textWrap="true"/>
                            </StackLayout>

                        </StackLayout>
                    </FlexboxLayout>

                    <FlexboxLayout alignItems="column" flexWrap="wrap"
                                   class="wd-70 o-7">
                        <FlexboxLayout alignItems="flex-start" class="card-header">
                            <FlexboxLayout class="wd-50">
                                <image src="~/images/ic_calendario.png"/>
                                <label :text="item.PRAZO" class="data"
                                       :class="cardStatus(item, false)"/>
                            </FlexboxLayout>
                            <FlexboxLayout class="wd-50 label-situacao">
                                <image src="~/images/ic_relogio.png"/>
                                <label :text="labelStatus(item.STATUS)"/>
                            </FlexboxLayout>
                        </FlexboxLayout>
                        <FlexboxLayout alignItems="row" flexWrap="wrap" class="card-body">
                            <label class="nome-tarefa wd-100" :text="item.DESCRICAO"/>
                            <label class="detalhes-tarefa wd-100" :text="item.DETALHES"/>
                        </FlexboxLayout>
                    </FlexboxLayout>
                </FlexboxLayout>
            </CardView>
        </StackLayout>
    </FlexboxLayout>
</template>

Inside the tarefas component I don't have any tap event

When I build the apk there are some styles that are lost, an example is this:

Dev mode:

APK mode:

I open this error here and not in NativeScript/tailwind because I think the cause is when you apply a style to a vue component so that it inherits within the component. For example, the following example shows the Steps component that the styles that are applied to the component itself do not seem to be applied

<template>
    <GridLayout rows="*" class="px-3 pt-4">

      <StackLayout height="100%">
        <FlexboxLayout
            class="items-center justify-between p-1">
          <Back horizontalAlignment="left"></Back>
          <FlexboxLayout
              class="bg-secondary rounded-full w-1/2 text-center justify-center items-center box-shadow"
              height="46">
            <Label col="1" text="Reservar Vuelta" class="mx-2 text-xl text-center" verticalAlignment="center"></Label>
            <Label col="2" text=">" class=""></Label>
          </FlexboxLayout>
        </FlexboxLayout>

        <Steps class="w-1/2 mt-8" :steps="3" :current="currentView + 1"></Steps>    <!-- THIS STYLES -->
       </StackLayout>
   </GridLayout>
  </Page>
</template>

// Steps.vue
<template>
  <StackLayout>
    <FlexboxLayout>
      <GridLayout v-for="index in steps"
                  :key="index"
                  height="7"
                  :class="[index <= current ? 'bg-primary' : 'bg-secondary']"
                  class="rounded-full mx-2"></GridLayout>
    </FlexboxLayout>
    <Label class="text-center mt-4 text-secondary" :text="`Step ${current} of ${steps}`"></Label>
  </StackLayout>
</template>

<script setup lang="ts">

const {steps, current} = defineProps({
  steps: Number,
  current: {
    type: Number,
    default: 1
  }
})

</script>

It is also happening to me in this component, the height and width are not applied (this is not tailwind because what I think is something general of the vue components and the styles)

      <Icon @tap="onSettings" verticalAlignment="center" class="mr-2" height="38" widht="38" icon="user-dark"
            :supportDarkMode="false"></Icon>

The HMR works perfectly until you have errors in the code, when the application fails and when making a new change it starts again the HMR starts to work slower and slower until it is better to stop and start again. (vue 3)

When I try to animate a view using ref to access the template element the app crashes and closes, but I can't see any errors. Code:

const btnNewTrip = ref()
const btnShowMore = ref()

const showButton = (view: View) => {
    view.animate({
      scale: {
        x: 1,
        y: 1
      },
      duration: 500
    })
}

onMounted(() =>{
  setTimeout(() => {
    console.log(btnNewTrip.value.nativeView)

    showButton(btnNewTrip.value.nativeView)
    showButton(btnShowMore.value.nativeView)
  }, 5000)
})

The console log shows me that it is a view, however the app fails, console.log: JS: StackLayout(46) By the way, i'm on android

Bumps loader-utils from 1.4.0 to 1.4.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps decode-uri-component from 0.2.0 to 0.2.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.