Is ListView supported in 3.0.0-beta?

[mreall]

I followed the instructions to create a new nativescript-vue 3 app. Then I added a basic ListView to the Home page. However, it won't render. Instead I get a lot of warning messages that say the following:

Vue warn]: Failed to resolve component: v-template
If this is a native custom element, make sure to exclude it from component resolution
via compilerOptions.isCustomElement.
at <Home>

I'm running the app on an iOS simulator. Is ListView supported or is there something else I need to do to get it to work?

package.json.

{
  "name": "example-app-vue3",
  "main": "src/app.ts",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@nativescript/core": "~8.5.0",
    "nativescript-vue": "3.0.0-beta.7"
  },
  "devDependencies": {
    "@nativescript/ios": "8.5.1",
    "@nativescript/tailwind": "^2.0.1",
    "@nativescript/types": "~8.5.0",
    "@nativescript/webpack": "~5.0.0",
    "@types/node": "~17.0.21",
    "tailwindcss": "^3.1.8",
    "typescript": "~4.9.5"
  }
}

Home.vue

<template>
  <Frame>
    <Page>
      <ActionBar>
        <Label text="Home" class="font-bold text-lg" />
      </ActionBar>

      <GridLayout rows="20, auto, auto, *" class="px-4">
        <Label row="1" class="text-xl align-middle text-center text-gray-500" :text="message" @tap="logMessage" />

        <Button row="2" @tap="$navigateTo(Details)" class="mt-4 px-4 py-2 bg-white border-2 border-blue-400 rounded-lg"
          horizontalAlignment="center">
          View Details
        </Button>
        <ListView row="3" for="location in tmpLocations">
          <v-template>
            <Label :text="location.name"></Label>
          </v-template>
        </ListView>
      </GridLayout>
    </Page>
  </Frame>
</template>

<script lang="ts" setup>
import {
  ref,
  computed,
  onMounted,
  onUnmounted,
  $navigateTo,
} from 'nativescript-vue';
import Details from './Details.vue';

const counter = ref(0);
const message = computed(() => {
  return `Blank {N}-Vue app: ${counter.value}`;
});

const tmpLocations = computed(() => {
  let locations = [];
  for (let i = 0; i < 5; i++) {
    locations.push({
      name: `location ${i}`,
    });
  }
  console.log(`Home/tmpLocations, locations`, locations);
  return locations;
});


function logMessage() {
  console.log('You have tapped the message!');
}

let interval: any;
onMounted(() => {
  console.log('mounted');
  interval = setInterval(() => counter.value++, 100);
});

onUnmounted(() => {
  console.log('unmounted');
  clearInterval(interval);
});
</script>

<style>
/* .info {
    font-size: 20;
  } */
</style>

[vallemar]

@mreall Is supported! Change v-template by template. Example https://github.com/nativescript-vue/nativescript-vue/blob/main/packages/template-blank/src/components/Details.vue

[mreall]

@vallemar Thanks for the quick response! I was able to get my ListView to work. Is there documentation that goes into more depth? For example, with the @itemTap event handler, I'm trying to access event.item to get the tapped item, but it is showing as undefined.

[rigor789]

No documentation coverage yet - the event.item was added by vue2, and haven't done the same in v3 yet. NativeScript itself only includes the event.index, so for convenience it was resolved to the actual item in v2 (ie. list.items[args.index]) and I think it's a nice QOL improvement that it should be added in v3 as well.