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>