does not work with vue3

[u007]

Make sure to check the demo app(s) for sample usage

generic starter template with material text field

If the demo apps cannot help and there is no issue for your problem, tell us about it

Please, ensure your title is less than 63 characters long and starts with a capital
letter.

Which platform(s) does your issue occur on?

• iOS/Android/Both : android (should be both)
• iOS/Android versions: android 13
• emulator or device. What type of device? android emulator from android studio

Please, provide the following version numbers that your issue occurs with:

• CLI: (run tns --version to fetch it): 8.4.0
• Cross-platform modules: (check the 'version' attribute in the
  node_modules/@nativescript/core/package.json file in your project): "version": "8.4.3",
• Runtime(s): (look for the "tns-android" and "tns-ios" properties in the package.json file of your project)

{
  "name": "app",
  "main": "src/app.ts",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@nativescript-community/ui-material-textfield": "^7.0.34",
    "@nativescript/core": "~8.4.3",
    "nativescript-vue": "3.0.0-beta.5",
  },
  "devDependencies": {
    "@nativescript/android": "8.4.0",
    "@nativescript/tailwind": "^2.0.1",
    "@nativescript/types": "~8.4.0",
    "@nativescript/webpack": "~5.0.12",
    "@types/node": "~18.11.18",
    "tailwindcss": "^3.2.4",
    "typescript": "~4.9.4",
    "vue": "^3.2.45"
  }
}

Please, tell us how to recreate the issue in as much detail as possible.

Describe the steps to reproduce it.

create a vue3 native project from base template.

in app.ts```
import { createApp } from 'nativescript-vue';
import Home from './components/Home.vue';
import TextFieldPlugin from '@nativescript-community/ui-material-textfield/vue';

const app = createApp(Home)
app.use(TextFieldPlugin);

app.start();

inside the page component```
<template>
<StackLayout class="px-4">
      <Image src="~/imgs/logo.png" height="80" class="mb-2" />
      <Label text="Hello again!" class="text-center text-lg" />

      <MDTextField v-model="username" hint="login id" />

      <StackLayout class="hr-light mb-2"></StackLayout>

    </StackLayout>
</template>

[vallemar]

For vue3 you need register component in your main.ts or app.ts:

import {createApp, registerElement} from 'nativescript-vue';

registerElement('MDTextField', () => require("@nativescript-community/ui-material-textfield").TextField, {
    model: {
        prop: 'text',
        event: 'textChange'
    }
})

[u007]

hey bro, thank you, let me try 😄

[u007]

just realised i tried this long ago and didnt work, got this:

  [$navigateTo] Failed to navigate:
  {} TypeError: Cannot set property android of [object Object] which has only a getter
  at setValue (file: src/webpack:/movingapp/node_modules/set-value/index.js:154:0)
  at NSVElement.setAttribute (file: src/webpack:/movingapp/node_modules/nativescript-vue/dist/dom/index.js:120:16)
  at patchAttr (file: src/webpack:/movingapp/node_modules/nativescript-vue/dist/renderer/modules/attrs.js:28:0)
  at patchProp (file: src/webpack:/movingapp/node_modules/nativescript-vue/dist/renderer/patchProp.js:26:25)
  at mountElement (file: src/webpack:/movingapp/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5204:0)
  at processElement (file: src/webpack:/movingapp/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5178:0)
  at patch (file: src/webpack:/movingapp/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5098:0)
  at mountChildren (file: src/webpack:/movingapp/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5285:0)
  at mountElement (file: src/webpack:/movingapp/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5195:0)
  at processElement (file: src/webpack:/movingapp/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5178:0)
  [Vue warn]: Unhandled error during execution of component event handler
  at <Button1 onTap=fn width="100%" horizontalAlignment="center"  ... >
  at <BottomBar dock="bottom" class="" >
  at <Home>