Розроблення фронтенду сайту на Vue.js
Vue.js — прогресивний фреймворк для побудови користувацьких інтерфейсів. На відміну від React, Vue — повнофункціональний фреймворк з коробки: реактивність, шаблонізатор, роутер (Vue Router), управління станом (Pinia). Vue 3 з Composition API — поточний стандарт.
Vue 3 Composition API
Composition API — головна зміна в Vue 3. Логіка групується за функціоналом, а не за типом опції:
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
const count = ref(0);
const doubled = computed(() => count.value * 2);
async function fetchData() {
// ...
}
onMounted(() => fetchData());
</script>
<template>
<div>
<p>{{ count }} × 2 = {{ doubled }}</p>
<button @click="count++">Збільшити</button>
</div>
</template>
<script setup> — синтаксичний цукор над setup(), не потребує return.
Реактивність
Vue 3 використовує Proxy для реактивності. Ключові примітиви:
-
ref<T>()— для примітивів та об'єктів (доступ через.value) -
reactive({})— для об'єктів (без.value) -
computed(() => ...)— обчислене значення -
watch()/watchEffect()— побічні ефекти
const user = reactive({ name: '', email: '' });
// vs
const name = ref('');
// user.name vs name.value
Composables (аналог хуків)
// composables/useAuth.ts
import { ref } from 'vue';
export function useAuth() {
const user = ref(null);
const isLoggedIn = computed(() => !!user.value);
async function login(credentials) {
user.value = await api.login(credentials);
}
return { user, isLoggedIn, login };
}
// У компоненті
const { user, isLoggedIn, login } = useAuth();
Pinia — управління станом
Pinia замінила Vuex:
// stores/cart.ts
import { defineStore } from 'pinia';
export const useCartStore = defineStore('cart', {
state: () => ({ items: [] as CartItem[] }),
getters: {
total: (state) => state.items.reduce((sum, item) => sum + item.price, 0),
},
actions: {
addItem(item: CartItem) {
this.items.push(item);
},
},
});
// У компоненті
const cart = useCartStore();
cart.addItem({ id: 1, price: 100 });
Vue Router 4
const routes = [
{ path: '/', component: HomePage },
{ path: '/blog/:slug', component: BlogPost, props: true },
{ path: '/admin', component: AdminLayout, meta: { requiresAuth: true },
children: [
{ path: 'users', component: UserList },
]
},
];
// Охоронець навігації
router.beforeEach((to) => {
if (to.meta.requiresAuth && !auth.isLoggedIn) return '/login';
});
Екосистема
- VueUse — 200+ composable утиліт (useStorage, useIntersectionObserver, useDark)
- Quasar Framework — UI-компоненти + PWA/Electron/Capacitor з коробки
- PrimeVue — enterprise UI-компоненти
- Vuelidate / VeeValidate — валідація форм
- Nuxt.js — SSR-фреймворк на основі Vue (аналог Next.js для React)
Терміни
Фронтенд на Vue 3 для SPA (5–15 екранів, CRUD, авторизація): 2–4 тижня. Комплексне приложення з кількома модулями, графіками, real-time: 1–3 місяці.