Nuxt.js 3

Co to jest Nuxt.js 3 i jak różni się od Next.js?

Nuxt.js 3: meta-framework dla Vue 3. Oficjalny fullstack framework Vue. Nitro — własny serwer. Vite pod spodem. Auto-imports — bez ręcznych importów. TypeScript natywny. Instalacja: npx nuxi@latest init my-app. Struktura: pages/ — routing (jak Next.js). components/ — auto-imported. composables/ — auto-imported. server/ — API routes (Nitro). layouts/ — layouty stron. middleware/ — nawigacyjne middleware. plugins/ — Vue plugins. assets/ — statyczne zasoby. public/ — publiczne pliki. Routing: pages/index.vue — /. pages/blog/index.vue — /blog. pages/blog/[slug].vue — /blog/:slug. pages/[...slug].vue — catch-all. Nested routes: pages/blog.vue — layout. pages/blog/index.vue — /blog. NuxtPage w blog.vue. Różnice vs Next.js: Nuxt — Vue ekosystem. Next.js — React ekosystem. Nuxt — auto-imports (mniej boilerplate). Next.js — RSC, bardziej elastyczny. Nuxt — Nitro (multi-platform deployment). Next.js — specjalizacja Vercel. Nuxt — convention over configuration. Layouts: layouts/default.vue — domyślny. definePageMeta({layout: 'custom'}). NuxtLayout wraps pages. Error handling: error.vue — strona błędu. showError(), clearError(). createError() — throw HTTP errors. useError() — reaktywny error state.

useAsyncData i useFetch — data fetching w Nuxt 3?

useFetch: najprostszy data fetching. const {data, pending, error, refresh} = await useFetch('/api/posts'). SSR-aware — dane serialized do klienta. Brak double fetch (client + server). Type-safe przez TypeScript. Opcje: useFetch('/api/posts', {query: {page: 1, limit: 10}, headers: {'Authorization': token}, method: 'POST', body: {title: 'New Post'}, key: 'posts', lazy: true, server: false}). key — cache key, deduplikacja requestów. lazy — nie blokuj renderowania. server: false — tylko na kliencie. useAsyncData: pełna kontrola. const {data, pending, error} = await useAsyncData('posts', async () => { return await $fetch('/api/posts') }). Pierwszy argument — unikalny klucz. Second — async function. Nadaje się dla non-fetch operations (DB bezpośrednio). $fetch: helper do HTTP requests. Nie SSR-aware (użyj useFetch). Po stronie klienta lub w server routes. Global interceptors. Refresh i watch: const {refresh, execute} = await useFetch('/api/data'). refresh() — ponowne pobranie. watch: [searchQuery] — auto-refresh przy zmianie. Clearance: clearNuxtData(key) — wyczyść cache. clearNuxtData(['key1', 'key2']). getCachedData: getCachedData: (key) => nuxtApp.payload.data[key]. Własna strategia cache po stronie klienta. useState: useState('count', () => 0) — shared state między SSR i CSR. Reactive, serialized. SSR state sharing. Transform: transform: (data) => data.map(item => ({...item, date: new Date(item.date)})).

Nitro server routes — API w Nuxt 3?

Nitro: server engine Nuxt. Własny serwer. Multi-platform (Node.js, Cloudflare Workers, Deno, etc.). server/ folder: server/api/ — API routes. server/routes/ — server routes. server/middleware/ — server middleware. server/plugins/ — server plugins. server/utils/ — utilities. API route: server/api/hello.ts: export default defineEventHandler((event) => { return {hello: 'world'} }). GET /api/hello — automatycznie. server/api/posts/index.ts — GET /api/posts. server/api/posts/[id].ts — GET /api/posts/:id. HTTP methods: export default defineEventHandler() — wszystkie metody. Lub: server/api/posts.post.ts — tylko POST. server/api/posts.get.ts — tylko GET. Request params: const id = getRouterParam(event, 'id'). const query = getQuery(event). const body = await readBody(event). getHeaders(event). Response: return data — auto JSON. setResponseStatus(event, 201). setResponseHeader(event, 'Cache-Control', '...'). sendStream(event, stream). Middleware server: server/middleware/auth.ts: export default defineEventHandler((event) => { const token = getHeader(event, 'authorization'). if (!token) { throw createError({statusCode: 401, message: 'Unauthorized'}) } }). Każdy request przechodzi przez middleware. Baza danych: Drizzle ORM w server/. Prisma w server/. DB URL przez runtimeConfig. Nie eksponuj secrets do klienta. H3: framework HTTP Nitro. Lightweight, TypeScript-first. Kompatybilny z Express middleware.

Composables, plugins i state management w Nuxt 3?

Auto-imports: Nuxt automatycznie importuje z: components/, composables/, utils/, server/utils/. Brak ręcznych importów w komponentach. Composables: composables/useCounter.ts: export const useCounter = () => { const count = useState('counter', () => 0). const increment = () => count.value++. return {count, increment} }. Użycie: const {count, increment} = useCounter(). Nie potrzeba importu! Pinia (state management): npm install pinia @pinia/nuxt. nuxt.config.ts: modules: ['@pinia/nuxt']. stores/user.ts: export const useUserStore = defineStore('user', { state: () => ({user: null}), actions: {async login(credentials) {...}} }). Użycie: const userStore = useUserStore(). runtimeConfig: nuxt.config.ts: runtimeConfig: {apiSecret: '', public: {apiBase: '/api'}}. Server: useRuntimeConfig().apiSecret. Klient: useRuntimeConfig().public.apiBase. .env: NUXT_API_SECRET=value. Plugins: plugins/myPlugin.ts: export default defineNuxtPlugin((nuxtApp) => { nuxtApp.provide('helper', someHelper) }). Użycie: const {$helper} = useNuxtApp(). Server-only plugin: plugins/db.server.ts. Middleware nawigacyjne: middleware/auth.ts: export default defineNuxtRouteMiddleware((to, from) => { const user = useState('user'). if (!user.value) return navigateTo('/login') }). Strony z middleware: definePageMeta({middleware: ['auth']}). useHead: useHead({title: 'My Page', meta: [{name: 'description', content: '...'}]}). useSeoMeta: type-safe meta tags. useOgImage — generowanie og:image.

Nuxt Content, deployment i ekosystem?

Nuxt Content v2: @nuxt/content moduł. Markdown, YAML, JSON, CSV. queryContent() — MDC query. Automatyczne routing z content/. Komponent ContentDoc — render markdown. MDC (Markdown Components): Vue komponenty w Markdown. ::Alert Treść :: (custom components). Syntax highlighting. Full-text search. Nuxt UI: @nuxt/ui — komponenty UI. Tailwind CSS based. Headless i stylowane. Dark mode. Nuxt Image: @nuxt/image. Automatyczna optymalizacja. WebP, AVIF. Lazy loading. Providers (Cloudinary, Cloudflare Images). Nuxt i18n: @nuxtjs/i18n. Locale routing (/pl, /en). lazy-load translations. useI18n() composable. Deployment Nuxt: Vercel: zero-config. Node.js SSR. Edge functions. Cloudflare Pages: server: 'cloudflare'. Nitro Cloudflare preset. Workers API dostępne. Static hosting: nuxt generate — pre-render. Netlify, GitHub Pages. Hybrid (static + SSR). Netlify: automatyczne wykrycie Nuxt. Serverless Functions przez Nitro. Node.js server: npm run build. node .output/server/index.mjs. Nuxt DevTools: wbudowany w dev mode. Components explorer. Composables inspector. Routes viewer. Dane SSR podgląd. VS Code extension. Testing Nuxt: @nuxt/test-utils. mountSuspended() — z Nuxt context. renderSuspended() dla komponentów. mockNuxtImport() — mock composables. Playwright dla E2E. Nuxt Layers: composable architecture. Reużywalne moduły. Base configuration sharing. @nuxt/eslint: nowy ESLint config. Flat config compatible.

Wyślij zapytanie