diff --git a/README.md b/README.md index a278c1d5..f18cc6e0 100644 --- a/README.md +++ b/README.md @@ -1,46 +1,47 @@

- +

-

NativeScript-Vue3 Beta

+

NativeScript-Vue3

- npm + npm - license + license

-NativeScript-Vue with Vue3 support now in beta! +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%20Beta) +Or, set up locally: -...or locally: - -```bash -ns create myAwesomeApp --template @nativescript-vue/template-blank@beta +```sh +ns create myAwesomeApp --template @nativescript-vue/template-blank@latest cd myAwesomeApp ns run ios|android ``` -## Vue Devtools +## Upgrading to v3 + +Please refer to our [Upgrade Guide](https://nativescript-vue.org/docs/essentials/upgrade-guide). -To use VueDevtools, run: +## Using Vue Devtools -```bash +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 (), + { depth: 0 }, +); const message = 'Hello World!!'; @@ -20,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'; @@ -37,6 +37,10 @@ onMounted(() => { onUnmounted(() => { console.log('UNMOUNTED HOME'); }); + +function close() { + $closeModal('closed via $closeModal'); +} @@ -73,9 +82,18 @@ onUnmounted(() => { )}\n\nindex: ${index} even: ${even} odd: ${odd}`" textWrap="true" padding="16" + @tap="$emit('customEvent', { item, index, even, odd })" /> + + 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) => {