Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork245
Open
Description
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-templateIf this is a native custom element, make sure to exclude it from component resolutionvia 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" /> </ActionBar> <GridLayout rows="20, auto, auto, *"> <Label row="1" :text="message" @tap="logMessage" /> <Button row="2" @tap="$navigateTo(Details)" 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>