10 промтов для Vue.js и Nuxt: от компонентов до Pinia store

Создай Vue 3 компонент на Composition API с TypeScript. Компонент должен называться UserCard. Пропсы: name (string, required), age (number, optional), avatarUrl (string, optional с default). Emits: 'click' и 'update:name'. Добавь слот по умолчанию для дополнительного контента. Используй defineProps и defineEmits.

<template>
  <div class="user-card" @click="emit('click')">
    <img v-if="avatarUrl" :src="avatarUrl" alt="avatar" />
    <h3>{{ name }}</h3>
    <p v-if="age">{{ age }} years old</p>
    <slot />
  </div>
</template>

<script setup lang="ts">
interface Props {
  name: string;
  age?: number;
  avatarUrl?: string;
}

const props = withDefaults(defineProps<Props>(), {
  avatarUrl: '/default-avatar.png'
});

const emit = defineEmits<{
  (e: 'click'): void;
  (e: 'update:name', value: string): void;
}>();
</script>

Напиши composable для Vue 3 useFetchData, который принимает URL (string) и опциональные параметры запроса (object). Возвращает ref: data, error, isLoading. Используй fetch API и onMounted для вызова при монтировании. Добавь возможность повторного запроса через метод refresh.

import { ref, onMounted, type Ref } from 'vue';

interface UseFetchDataReturn<T> {
  data: Ref<T | null>;
  error: Ref<string | null>;
  isLoading: Ref<boolean>;
  refresh: () => Promise<void>;
}

export function useFetchData<T = unknown>(url: string, params?: Record<string, string>): UseFetchDataReturn<T> {
const data = ref<T

| null>(null) as Ref<T | null>;
  const error = ref<string | null>(null);
  const isLoading = ref(false);

  const fetchData = async () => {
    isLoading.value = true;
    error.value = null;
    try {
      const queryString = params ? '?' + new URLSearchParams(params).toString() : '';
      const response = await fetch(url + queryString);
      if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
      data.value = await response.json();
    } catch (err) {
      error.value = err instanceof Error ? err.message : 'Unknown error';
    } finally {
      isLoading.value = false;
    }
  };

  onMounted(fetchData);

  return { data, error, isLoading, refresh: fetchData };
}

Создай страницу Nuxt 3 для динамического роутинга с параметром id в папке pages/users/[id].vue. Добавь middleware для проверки авторизации (useAuth). Используй useRoute для получения id и useFetch для загрузки данных пользователя. Обработай случаи, когда пользователь не найден (404).

<template>
  <div>
    <div v-if="loading">Загрузка...</div>
    <div v-else-if="error">Ошибка: {{ error }}</div>
    <div v-else-if="!user">Пользователь не найден</div>
    <div v-else>
      <h1>{{ user.name }}</h1>
      <p>Email: {{ user.email }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  middleware: 'auth'
});

const route = useRoute();
const { data: user, error, pending: loading } = await useFetch(`/api/users/${route.params.id}`);
</script>

Создай Pinia store для корзины покупок (cartStore) с использованием Options API. State: items (массив объектов с id, name, price, quantity). Getters: totalPrice, itemCount. Actions: addItem, removeItem, clearCart. Все данные должны быть типизированы с помощью TypeScript интерфейсов.

import { defineStore } from 'pinia';

interface CartItem {
  id: number;
  name: string;
  price: number;
  quantity: number;
}

interface CartState {
  items: CartItem[];
}

export const useCartStore = defineStore('cart', {
  state: (): CartState => ({
    items: []
  }),
  getters: {
    totalPrice: (state) => state.items.reduce((sum, item) => sum + item.price * item.quantity, 0),
    itemCount: (state) => state.items.reduce((count, item) => count + item.quantity, 0)
  },
  actions: {
    addItem(item: CartItem) {
      const existing = this.items.find(i => i.id === item.id);
      if (existing) {
        existing.quantity += item.quantity;
      } else {
        this.items.push({ ...item });
      }
    },
    removeItem(id: number) {
      this.items = this.items.filter(i => i.id !== id);
    },
    clearCart() {
      this.items = [];
    }
  }
});

Напиши кастомную директиву Vue 3 v-focus, которая устанавливает фокус на элементе при монтировании. Директива должна быть зарегистрирована глобально в main.ts. Добавь возможность модификатора .delay для задержки фокуса (например, v-focus.delay="500").

Создай composable useDebounce, который принимает функцию и задержку (ms). Возвращает debounced версию функции. Используй setTimeout и clearTimeout. Добавь опцию immediate для немедленного вызова.

import { ref } from 'vue';

export function useDebounce<T extends (...args: unknown[]) => unknown>(fn: T, delay: number, immediate = false) {
  let timer: ReturnType<typeof setTimeout> | null = null;

  const debounced = (...args: Parameters<T>) => {
    if (timer) clearTimeout(timer);
    if (immediate && !timer) {
      fn(...args);
    }
    timer = setTimeout(() => {
      fn(...args);
      timer = null;
    }, delay);
  };

  return { debounced };
}

Создай middleware для Nuxt 3 под названием auth. Он должен проверять, есть ли токен в localStorage. Если токена нет, перенаправлять на страницу /login. Используй navigateTo. Добавь проверку на стороне сервера (если процесс серверный, проверять cookie).

// middleware/auth.ts
export default defineNuxtRouteMiddleware((to, from) => {
  if (process.client) {
    const token = localStorage.getItem('auth_token');
    if (!token) {
      return navigateTo('/login');
    }
  } else {
    // Для SSR можно проверить cookie
    const token = useCookie('auth_token').value;
    if (!token) {
      return navigateTo('/login');
    }
  }
});

Создай Vue 3 компонент Modal с использованием Teleport. Компонент должен принимать пропсы: show (boolean), title (string). Добавь слот для контента. Закрытие по клику на оверлей и по нажатию Escape. Используй watch для синхронизации с show.

<template>
  <Teleport to="body">
    <div v-if="show" class="modal-overlay" @click.self="close">
      <div class="modal-content">
        <h2>{{ title }}</h2>
        <slot />
        <button @click="close">Закрыть</button>
      </div>
    </div>
  </Teleport>
</template>

<script setup lang="ts">
const props = defineProps<{ show: boolean; title: string }>();
const emit = defineEmits<{ (e: 'update:show', value: boolean): void }>();

const close = () => emit('update:show', false);

const handleEscape = (e: KeyboardEvent) => {
  if (e.key === 'Escape') close();
};

onMounted(() => document.addEventListener('keydown', handleEscape));
onUnmounted(() => document.removeEventListener('keydown', handleEscape));
</script>

Напиши composable useLocalStorage, который принимает ключ (string) и значение по умолчанию. Возвращает ref, который автоматически синхронизируется с localStorage при изменении. Используй watch для отслеживания изменений. Обработай ошибки парсинга JSON.

import { ref, watch, type Ref } from 'vue';

export function useLocalStorage<T>(key: string, defaultValue: T): Ref<T> {
  const stored = localStorage.getItem(key);
  const data = ref<T>(stored ? JSON.parse(stored) : defaultValue) as Ref<T>;

  watch(data, (newVal) => {
    try {
      localStorage.setItem(key, JSON.stringify(newVal));
    } catch (e) {
      console.error('Failed to save to localStorage', e);
    }
  }, { deep: true });

  return data;
}

Создай плагин Nuxt 3 под названием 'icons', который глобально регистрирует компонент Icon из библиотеки heroicons. Используй defineNuxtPlugin. Плагин должен работать только на клиенте. Добавь поддержку TypeScript путём расширения глобальных типов.

// plugins/icons.client.ts
import { defineNuxtPlugin } from '#app';
import Icon from 'heroicons-vue';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('Icon', Icon);
});

// Для TypeScript: declare module 'vue' { export interface GlobalComponents { Icon: typeof import('heroicons-vue').default } }