Андрей

Это так не работает. Передача состояние с сервера на клиент не происходит сама по себе, его нужно прокидывать, для этого в Nuxt сделано много утилит (useAsyncData, useLazyAsyncData, useNuxtData, useState и т.д.), которые пляшут вокруг большого сериализуемого стейта, который на клиенте обратно десериализуется. И useFetch использует это под капотом.

То есть ваш код работает так:
1. На сервере вызывается функция getPosts
2. Выполняется запрос, результат сохраняется в стейт накста, в total.value записывается значение
3. На клиенте вызывается функция getPosts
4. Но тут уже запрос не выполняется, только вычитывается значение из стейта, соответственно onResponse не вызывается

Решить это можно несколькими путями: создать отдельный стейт для total, либо к ответу в onResponse дописывать значение заголовка.

<script setup lang="ts">
const { data } = useFetch('https://jsonplaceholder.typicode.com/todos/1', {
  onResponse({ response, options }) {
    // дописываем в data значение заголовка
    response._data.type = response.headers.get('Content-Type');;
  },
});
</script>

Сериализованное состояние, которое идет с сервера на клиент можно дебажить через Nuxt Devtools

Если у вас версия vue >3.2, то страшного ничего нет. Проблема в том, что у vue рендер синхронный и после первого await в setup теряется контекст монтируемого компонента, который используется много где под капотом - реактивные функция вроде watch, хуки жизненного цикла и т.д. Это можно обойти, а начиная с vue 3.2 это сделано на уровне компилятора sfc. Подробно с примерами про это написано тут.

Если говорить про useAsyncData - это уже композабл самого nuxt, нужный в первую очередь для дедупликации данных при ssr. По умолчанию данные запрашиваются на сервере, серилизуются и передаются вместе с html (пример на скриншоте). Этот композабл можно использовать и без await, при условии, что запрос вам нужно выполнять только на клиенте (server: false), тогда обработку ошибок надо будет делать через watch(error, ...)

const virtualizationContainer = ref<typeof VVirtualizationContainer | null>(null);

playground

type ComponentProps<ComponentDefinition> = ComponentDefinition extends { new (): { $props: infer P } } ? P : never;

const array = ['part1-item1', 'part1-item2', 'part2-item1', 'part3-item1'];

const result = array.reduce((acc, rec) => {
  const [part, item] = rec.split('-');
  if (!acc[part]) {
    acc[part] = [item];
  } else {
    acc[part].push(item);
  }
  return acc;
}, {});

Для чего-то небольшого можно обойтись встроенными возможностями Nuxt, он позволяет делать бэкенд рядом с фронтедом с помощью своего сервера - Nitro. Подробнее об этом есть в документации Nuxt и документации Nitro.

Если нужно, Nitro может использовать и другие решения (Express, Hono и др.) про это есть видео + дока.

Это стандартное поведение компонента <NuxtPage /> и не является проблемой, он внутри себя использует <RouterView /> из vue-router в который добавляется внутренняя логика Nuxt (например добавление Transitions если они указаны в настройках). Anonymous Component на самом деле - компонент RouteProvider, который занимается перерисовкой страниц. В общем, просто обертка фреймворка для роутинга.

RouteProvider добавляется тут. Код самого провайдера можно тут посмотреть.

Еще есть vue-eslint правило по порядку атрибутов

export const Footer = (props?: IFooterProps) => {
    return (
        <View style={styles.container}>
            {props && props.button ? (
              <>
                 <RNHoleView style={styles.background} holes={[hole]}>
                      <View style={styles.maskBorder}></View>
                  </RNHoleView>
                  {props.button}
               </>
            ) : (
              <View style={styles.background}></View>
            )}
        </View>
    );
};

echo -n "текущее количество нескрытых файлов и директорий в /usr/bin равно:" > results.txt | ls /usr/bin  | wc -l >>  results.txt

Чтобы напрямую вызывать методы инстанса компонента, нужно методы сделать публичными. Для этого есть expose в Options API и defineExpose для Composition API

Child.vue

<script setup>
const foo = ref('foo')
const bar = () => console.log('bar')

defineExpose({
  foo,
  bar,
})
</script>

Parent.vue

<template>
  <Child ref="child" />
</template>

<script setup>
const child = ref(null);

onMounted(() => {
  console.log(child.value.foo)
  console.log(child.value.bar())
})
</script>

Т. е. без доработок код из этого репозитория не заработает

Если нужны именно хуки

const nuxtApp = useNuxtApp();

const loadingStartHook = nuxtApp.hook('page:loading:start', () => {
  ...
});

const loadingFinishHook = nuxtApp.hook('page:loading:end', () => {
  ...
});

const unsubError = nuxtApp.hook('vue:error', () => ...)

В какой-то из версий добавили встроенный композабл useLoadingIndicator . Это удобная обертка над этими хуками, можно в исходниках глянуть.

Использовать достаточно просто

const { progress, isLoading } = useLoadingIndicator();

Тут можно посмотреть пример кастомного индикатора

serverSupabaseClient возвращает Promise, нужно добавить await

import { serverSupabaseClient } from '#supabase/server'

export default eventHandler(async (event) => {
    const client = await serverSupabaseClient(event)
    const { data } = await client.from('users').select("*")
    return { users: data }
})

Тормозить начинает из-за большого количества нод в dom дереве. Решается использование "виртуального скролла", суть которого заключается в отрисовки только видимых элементов.

Подробнее - https://www.patterns.dev/vanilla/virtual-lists

Утилита для Vue - https://vueuse.org/core/useVirtualList/

Динамические параметры во vue-router обозначаются через :

export default defineNuxtConfig({
  hooks: {
    "pages:extend"(pages) {
      pages.push({
        name: "cities-id",
        path: "/cities/:id",
        file: "~/pages/cities.vue",
      });
    },
  },
});

Пример

Media Session API