Vue 3, Pinia i Nuxt 3

Reaktywny framework z Setup + ref/reactive

Zastosowanie: SPA, komponenty, reaktywny UI

Oficjalny store — defineStore, actions, getters

Zastosowanie: Global state, lazy stores, DevTools

File-system lub code routing, guards, lazy

Zastosowanie: SPA routing, auth guards, code splitting

200+ composables (useStorage, useDark, useFetch)

Zastosowanie: Reużywalna logika, browser APIs

SSR/SSG/SPA, Nitro, auto-imports, file routing

Zastosowanie: Full-stack apps, content sites, SEO

Tailwind + Reka UI components dla Nuxt

Zastosowanie: Design system dla projektów Nuxt

Co to jest Vue 3 Composition API i jak różni się od Options API?

Vue 3: framework JavaScript (Evan You, 2020). Przepisany od zera vs Vue 2. Composition API: nowe API Vue 3 (inspirowane React Hooks). Options API: klasyczne Vue (data, methods, computed, watch). Composition API zalety: lepsza reużywalność logiki (composables). Lepsza TypeScript integracja. Mniejszy bundle (tree-shakeable). Lepsza organizacja kodu (po feature, nie po type). Setup function: export default {setup() {const count = ref(0). const double = computed(() => count.value * 2). function increment() {count.value++}. return {count, double, increment}}}. Reaktywność: ref(initialValue) — reaktywna wartość prymitywna. ref.value — dostęp w JS. ref bezpośrednio w template (auto-unwrap). reactive(object) — reaktywny obiekt. Nie potrzeba .value. Ale tracimy reaktywność przy destructuringu. Computed: const double = computed(() => count.value * 2). Read-only lub get+set. Automatyczne dependency tracking. Watch: watch(source, callback). watchEffect — automatyczny tracking dependencji. watchEffect uruchamia się przy starcie. Lifecycle hooks: onMounted, onUnmounted, onUpdated, onBeforeMount. Script Setup: nowszy shorthand. script lang='ts' setup. Zmienne i funkcje automatycznie dostępne w template. Nie trzeba return {}.

Composables — jak pisać reużywalną logikę w Vue 3?

Composables: Vue 3 odpowiednik React Custom Hooks. Funkcje zaczynające od 'use'. Zawierają reaktywną logikę z Composition API. Prosty przykład useMouse: function useMouse() {const x = ref(0). const y = ref(0). function update(e) {x.value = e.pageX; y.value = e.pageY}. onMounted(() => window.addEventListener('mousemove', update)). onUnmounted(() => window.removeEventListener('mousemove', update)). return {x, y}}. Użycie: const {x, y} = useMouse(). Composable fetch: function useFetch(url) {const data = ref(null). const loading = ref(true). const error = ref(null). fetch(url).then(r => r.json()).then(d => {data.value = d; loading.value = false}).catch(e => {error.value = e; loading.value = false}). return {data, loading, error}}. VueUse: kolekcja 200+ composables (@vueuse/core). useStorage, useEventListener, useMediaQuery, useDark, useIntersectionObserver, useFetch, useRefHistory (undo/redo). useStorage: localStorage/sessionStorage reaktywne. useDark: dark mode. useBreakpoints: responsive breakpoints. Oficjalna biblioteka — polecana. Composables vs mixins: mixins (Vue 2): konflikty nazw, nieklarowne źródło. Composables (Vue 3): explicit, tree-shakeable, TypeScript friendly. Script Setup + composables = idealne połączenie.

Pinia — state management dla Vue 3?

Pinia: oficjalny state manager Vue 3 (2021, zastąpił Vuex). Prosty, intuicyjny, TypeScript first. defineStore: export const useUserStore = defineStore('user', {state: () => ({name: '', email: '', isLoggedIn: false}), getters: {displayName: (state) => state.name.toUpperCase()}, actions: {async login(credentials) {const user = await api.login(credentials). this.name = user.name. this.isLoggedIn = true}}}). Komponent: const userStore = useUserStore(). userStore.name. userStore.login({...}). Setup stores (nowszy styl): export const useCounterStore = defineStore('counter', () => {const count = ref(0). const double = computed(() => count.value * 2). function increment() {count.value++}. return {count, double, increment}}). Jak composable — Composition API. Pinia vs Vuex: Pinia — brak mutations (tylko actions), TypeScript first, modułowy, devtools. Vuex — legacy, Vue 2, mutations+actions (verbose). Zawsze Pinia w nowych projektach. Devtools: Vue DevTools + Pinia plugin. State inspection. Action timeline. Hot module replacement. Pinia Plugins: persistedstate (localStorage/sessionStorage). Pinia ORM (Entity model). Firebase/Supabase integrations. SSR support: Nuxt.js automatycznie obsługuje. storeToRefs: const {name, isLoggedIn} = storeToRefs(userStore). Zachowuje reaktywność (nie destrukturuj bezpośrednio).

Vue Router 4 — routing w Vue 3, lazy loading i navigation guards?

Vue Router 4: oficjalny router Vue 3. createRouter + createWebHistory/createWebHashHistory/createMemoryHistory. Konfiguracja: const router = createRouter({history: createWebHistory(), routes: [{path: '/', component: Home}, {path: '/about', lazy: () => import('./About.vue')}, {path: '/user/:id', component: User, props: true}]}). Lazy loading: () => import('./Component.vue') — code splitting per route. Vite + Rollup automatycznie tworzy chunki. Navigation Guards: beforeEach(to, from, next) — globalny guard. beforeEnter — per route. Autentykacja: router.beforeEach((to) => {if (to.meta.requiresAuth && !isLoggedIn()) return '/login'}). Meta fields: {path: '/admin', component: Admin, meta: {requiresAuth: true, role: 'admin'}}. router.push(): programatyczna nawigacja. router.push('/path'). router.push({name: 'user', params: {id: 1}}). router.replace() — bez historii. Nested routes: children: [{path: 'profile', component: UserProfile}]. router-view zagnieżdżone. Scroll behavior: scrollBehavior(to, from, savedPosition) -> {behavior: 'smooth', top: 0}. useRouter/useRoute: const router = useRouter(). const route = useRoute(). route.params, route.query, route.meta. Programmatic: router.push, router.go, router.back. Transition: router-view + transition component. animate per route.

Nuxt 3 — full-stack framework dla Vue 3?

Nuxt 3: meta-framework dla Vue 3 (jak Next.js dla React). Vite + Nitro (server). Auto-imports (komponenty, composables, utils). File-system routing (pages/ directory). SSR, SSG, SPA, ISR — wszystkie tryby. Server-side: server/api/users.ts — API endpoint. server/middleware — server middleware. server/plugins — server plugins. Nitro: nowy server engine. Deploy na Node, Edge, Netlify, Vercel, Cloudflare. useAsyncData: dane na serwerze + hydration. const {data, pending, error} = await useAsyncData('users', () => fetchUsers()). useFetch: shorthand dla useAsyncData + $fetch. const {data} = await useFetch('/api/users'). $fetch (ofetch): type-safe HTTP client. Auto-imports: ref, computed, useState — bez importowania. defineComponent, useRouter — auto. Custom composables w composables/ — auto-imported. useState: server/client shared state. const count = useState('count', () => 0). Nuxt UI: oficjalna UI library (Tailwind + Radix/Reka UI). Nuxt Content: markdown-based CMS. Nuxt Image: image optimization. Nuxt SEO: meta, sitemap, robots, schema. Nuxt DevTools: wbudowane devtools. Moduły: nuxt.com/modules — rozbudowany ekosystem. Nuxt vs Next.js: Nuxt — Vue ecosystem, auto-imports, elegancki. Next.js — React ecosystem, RSC, Vercel. Oba full-stack frameworks. Kiedy Nuxt: Vue team, content sites, blogs.

Wyślij zapytanie