tethys.backend/resources/js/Pages/App.vue

<template>
	<div>
		<Link href="/app/login">Login</Link>
		<h1 class="text-red-500">Welcome, {{ testing }}</h1>
		<n-button>Testing</n-button>
		<n-input v-bind:value="testing"></n-input>

		<div class="features">
			<ul>
				<li v-for="user in users">
					<span>{{ user.login }}</span>
					<span>{{ user.email }}</span>
				</li>
			</ul>
		</div>
	</div>
</template>

<!-- <script>
import { Link } from '@inertiajs/inertia-vue3';
import DefaultLayout from '@/Layouts/Default.vue';
import { NInput, NButton } from 'naive-ui';

export default {
	layout: DefaultLayout,
	props: {
		testing: String,
		users: Array,
	},

	components: {
		Link,
		NInput,
		NButton,
	},
};
</script> -->

<!-- <script lang="js">
import { Link } from '@inertiajs/vue3'
import DefaultLayout from '../Layouts/Default.vue';

export default {
	props: {
		testing: String,
	},

	components: {
		Link,
		DefaultLayout
	}
}
</script> -->

<script lang ="ts">
import { Component, Vue, Prop } from 'vue-facing-decorator';
import type User from "App/Models/User";
import { Link } from '@inertiajs/vue3';
import DefaultLayout from '@/Layouts/Default.vue';
import { NInput, NButton } from 'naive-ui';

@Component({
	options: {
		layout: DefaultLayout,
	},
	name: 'AppComponent',
	components: {
		Link,
		NInput,
		NButton,
	},
})
export default class AppComponent extends Vue {
	// Component Property
	@Prop({
		type: String,
		default: () => (""),
	})
	testing: string;

	@Prop({
		type: Array,
		default: () => ([]),
	})
	users: Array<User>;	
}
</script>