contacts.vue 751 B

123456789101112131415161718192021222324252627282930313233343536
  1. <template>
  2. <div
  3. class="w-full h-full flex flex-col gap-5 p-2"
  4. >
  5. <div
  6. v-show="!contactsList"
  7. v-for="i of Array.from({ length: 5 }).map((i, idx) => idx)"
  8. :key="i"
  9. :class="i === 0 ? 'mt-0 mb-4' : 'my-4'"
  10. class="w-full h-[200px] loading rounded-md opacity-30"
  11. />
  12. <ContactItem
  13. v-for="(contact, idx) in contactsList"
  14. :key="idx"
  15. :contact="contact"
  16. />
  17. </div>
  18. </template>
  19. <script setup lang="ts">
  20. const { $api } = useNuxtApp()
  21. const contactsList = ref()
  22. definePageMeta({
  23. name: 'Контакты',
  24. middleware: ['user-only'],
  25. })
  26. onMounted(async () => {
  27. contactsList.value = await $api.contacts.getContacts()
  28. })
  29. </script>
  30. <style scoped>
  31. </style>