54 lines
1.5 KiB
Vue
54 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
const { $trpc } = useNuxtApp();
|
|
|
|
const { data: contacts } = await $trpc.contactList.useQuery();
|
|
</script>
|
|
|
|
<template>
|
|
<div id="app">
|
|
<div id="sidebar">
|
|
<h1>Nuxt Contacts</h1>
|
|
<div>
|
|
<form id="search-form" role="search">
|
|
<input
|
|
id="q"
|
|
aria-label="Search contacts"
|
|
name="q"
|
|
placeholder="Search"
|
|
type="search"
|
|
>
|
|
<div
|
|
id="search-spinner"
|
|
aria-hidden
|
|
hidden
|
|
/>
|
|
</form>
|
|
<form method="post">
|
|
<button type="submit">New</button>
|
|
</form>
|
|
</div>
|
|
<nav>
|
|
<ul v-if="contacts?.length">
|
|
<li v-for="contact in contacts" :key="contact.id">
|
|
<NuxtLink :to="{name: 'contacts-contactId', params: {contactId: contact.id}}">
|
|
<template v-if="contact.first || contact.last">{{contact.first}} {{contact.last}}</template>
|
|
<i v-else>No Name</i>
|
|
<span v-if="contact.favorite">★</span>
|
|
</NuxtLink>
|
|
</li>
|
|
<li>
|
|
<NuxtLink :to="{name: 'contacts-contactId', params: {contactId: 1}}">Your Name</NuxtLink>
|
|
</li>
|
|
<li>
|
|
<NuxtLink :to="{name: 'contacts-contactId', params: {contactId: 2}}">Your Friend</NuxtLink>
|
|
</li>
|
|
</ul>
|
|
<p v-else><i>No contacts</i></p>
|
|
</nav>
|
|
</div>
|
|
<div id="detail">
|
|
<slot/>
|
|
</div>
|
|
</div>
|
|
</template>
|