diff --git a/README.md b/README.md index 5334cc3d..f18cc6e0 100644 --- a/README.md +++ b/README.md @@ -1,45 +1,47 @@

- - Yes, the image needs to be updated :) +

-

NativeScript-Vue3 RC

+

NativeScript-Vue3

- npm + npm - license + license

-NativeScript-Vue with Vue3 support now in RC! +NativeScript-Vue now supports Vue 3 and is generally available! This version brings improved reactivity, a modern plugin system, and better TypeScript support. -## Quick start +## Quick Start -To get started, you can use the [StackBlitz Template](https://stackblitz.com/fork/github/nativescript-vue/nativescript-vue/tree/main/packages/stackblitz-template?file=src%2Fcomponents%2FHome.vue&title=NativeScript%20Starter%20Vue3) +To get started, you can use the [StackBlitz Template](https://stackblitz.com/fork/github/nativescript-vue/nativescript-vue/tree/main/packages/stackblitz-template?file=src%2Fcomponents%2FHome.vue&title=NativeScript%20Starter%20Vue3). -...or locally: +Or, set up locally: -```bash -ns create myAwesomeApp --template @nativescript-vue/template-blank@rc +```sh +ns create myAwesomeApp --template @nativescript-vue/template-blank@latest cd myAwesomeApp ns run ios|android ``` -## Vue Devtools +## Upgrading to v3 -To use VueDevtools, run: +Please refer to our [Upgrade Guide](https://nativescript-vue.org/docs/essentials/upgrade-guide). -```bash +## Using Vue Devtools + +To enable Vue Devtools, run: + +```sh ns run ios|android --env.vueDevtools ``` -This will launch the standalone VueDevtools, and connect to it once the app launches. Right now, devtools are only supported on iOS Simulators and Android Emulators, but physical device support should come soon (requires configuring a host/port that the device can connect to.). - -On android, you must enable cleartext http traffic, otherwise any connections are silently dropped by the system. In the `App_Resources/Android/src/main/AndroidManifext.xml` add the following to your existing `` tag: +🛠️ **Android Users:** +To allow Vue Devtools to connect, enable **cleartext HTTP traffic** in your `AndroidManifest.xml`: ```diff + + + + + + + diff --git a/demo/src/components/HMRTestLoader.vue b/demo/src/components/HMRTestLoader.vue new file mode 100644 index 00000000..0494f719 --- /dev/null +++ b/demo/src/components/HMRTestLoader.vue @@ -0,0 +1,24 @@ + + + diff --git a/demo/src/components/Home.vue b/demo/src/components/Home.vue index 099da663..881cacb3 100644 --- a/demo/src/components/Home.vue +++ b/demo/src/components/Home.vue @@ -2,6 +2,7 @@ import { ListItem, onMounted, onUnmounted } from 'nativescript-vue'; import { goHome } from '../composables/goHome'; import Test from './Test.vue'; +import { $closeModal } from 'nativescript-vue'; withDefaults( defineProps<{ @@ -10,9 +11,7 @@ withDefaults( items?: (string | number)[]; enabled?: boolean; }>(), - { - depth: 0, - }, + { depth: 0 }, ); const message = 'Hello World!!'; @@ -25,11 +24,7 @@ interface Test { const items: Test[] = Array(1000) .fill(0) - .map((_, i) => ({ - name: `Item ${i}`, - foo: i, - bool: true, - })); + .map((_, i) => ({ name: `Item ${i}`, foo: i, bool: true })); function selector(item: ListItem) { return item.even ? 'default' : 'odd'; @@ -42,6 +37,10 @@ onMounted(() => { onUnmounted(() => { console.log('UNMOUNTED HOME'); }); + +function close() { + $closeModal('closed via $closeModal'); +} + + diff --git a/demo/src/components/demo_ListView.vue b/demo/src/components/demo_ListView.vue index 076075fb..4503e574 100644 --- a/demo/src/components/demo_ListView.vue +++ b/demo/src/components/demo_ListView.vue @@ -95,6 +95,7 @@ const onItemTap = useDebounceFn((item: Item) => {