Czym jest Vue? Progresywny framework i kiedy go wybrać

Vue to jedna z trzech najbardziej znanych technologii frontendowych obok Reacta i Angulara. Ten artykuł wyjaśnia, czym jest Vue, pokazuje działający przykład i mówi, kiedy warto go wybrać. Pisze go osoba, która na co dzień uczy Reacta, więc od razu zaznaczam: na wejście do frontendu rekomendujemy React. Vue przedstawiam rzetelnie, a uzasadnienie rekomendacji znajdziesz niżej.

Czym jest Vue?

Według oficjalnej dokumentacji Vue to framework JavaScript do budowania interfejsów użytkownika. Opiera się na standardowym HTML, CSS i JavaScript oraz oferuje deklaratywny model programowania oparty na komponentach. Dwie główne cechy to:

• Deklaratywne renderowanie (declarative rendering): w szablonie opisujesz, jak ma wyglądać HTML dla danego stanu.
• Reaktywność (reactivity): Vue śledzi zmiany danych i samo aktualizuje widok.

Dokumentacja używa też określenia „progresywny framework”. Chodzi o to, że możesz używać Vue w małym zakresie (jeden element na istniejącej stronie) albo zbudować w nim całą aplikację. Aktualna wersja to Vue 3 (3.5.44 na dzień 2 listopada 2026), a wsparcie dla Vue 2 zakończyło się 31 grudnia 2023.

Jedna ważna uwaga z samej dokumentacji, z którą się zgadzam: jeśli jesteś zupełnie nowy we frontendzie, nie skacz od razu do frameworka. Najpierw opanuj podstawy HTML, CSS i JavaScriptu.

Jak wygląda aplikacja we Vue? Przykład listy zadań

Ta sama aplikacja co w artykule o Reaccie (pole, przycisk „Dodaj”, licznik i lista zadań), tym razem we Vue 3.5, uruchomiona w projekcie z npm create vue@latest. W pliku App.vue:

<script setup>
import { ref } from "vue";

const text = ref("");
const tasks = ref([]);

function addTask() {
  if (!text.value.trim()) return;
  tasks.value.push({ id: Date.now(), title: text.value.trim() });
  text.value = "";
}
</script>

<template>
  <main>
    <h1>Lista zadań</h1>
    <form @submit.prevent="addTask">
      <input v-model="text" placeholder="Nowe zadanie" />
      <button type="submit">Dodaj</button>
    </form>
    <p>Liczba zadań: {{ tasks.length }}</p>
    <ul>
      <li v-for="task in tasks" :key="task.id">{{ task.title }}</li>
    </ul>
  </main>
</template>

W Chrome dodałem dwa zadania („Kupić mleko”, „Napisać artykuł”). Licznik pokazał „Liczba zadań: 2”, a lista zawierała oba wpisy.

Co tu widać:

• Plik .vue (komponent jednoplikowy, Single-File Component) zawiera logikę (<script>), szablon (<template>) i opcjonalnie style w jednym miejscu.
• ref tworzy reaktywną wartość. W skrypcie czytasz ją i zmieniasz przez .value, a w szablonie piszesz samo text albo tasks.length.
• v-model łączy pole tekstowe z wartością w obie strony, bez osobnej obsługi onChange.
• v-for zamienia tablicę w listę elementów, a :key pomaga Vue śledzić elementy.
• @submit.prevent to skrót na obsługę zdarzenia z wywołaniem preventDefault().

W tym przykładzie użyłem tzw. Composition API w składni <script setup>. Dokumentacja opisuje dwa style pisania (Options API i Composition API) i zaleca Composition API z komponentami jednoplikowymi, jeśli budujesz pełne aplikacje.

Czym Vue różni się od Reacta w tej samej aplikacji?

Te same elementy aplikacji zapisane w dwóch narzędziach:

Najważniejsza różnica filozoficzna: w Reaccie stanu nie modyfikujesz bezpośrednio, tylko przekazujesz nową wartość funkcji setX. We Vue zmieniasz dane wprost (tasks.value.push(...)), a framework sam wykrywa zmianę. Dla niektórych jest to łatwiejsze na początku, dla innych mniej przewidywalne w dużych projektach.

Jakie są mocne strony i ograniczenia Vue?

Mocne strony:

• Łatwe wejście w szablony. Jeśli znasz HTML, szablon Vue wygląda znajomo.
• Mniej kodu w prostych formularzach dzięki v-model.
• Niewielka paczka w prostym przykładzie. Ta sama lista zadań po zbudowaniu zajmuje 65,5 kB (25,8 kB po gzip), przy 220 kB (68,8 kB po gzip) dla Reacta. To minimalna aplikacja zbudowana domyślnymi narzędziami, a nie benchmark.
• Stopniowe wdrażanie w istniejący projekt (progresywność).

Ograniczenia:

• Mniejsza popularność niż React. Według ankiety Stack Overflow 2025 Vue używa 18,4% programistów zawodowych, a React 46,9%.
• Dwa style pisania (Options i Composition) oznaczają, że w materiałach i cudzym kodzie spotkasz oba.
• Ekosystem mniejszy niż reactowy. Odpowiednikiem Next.js dla Vue jest Nuxt, ale jego użycie jest zauważalnie mniejsze (4,1% wśród programistów zawodowych wobec 21,5% dla Next.js, dane z tej samej ankiety).

Vue czy React? Dane ze Stack Overflow 2025

„Desired” to odsetek wszystkich respondentów, którzy chcą używać technologii w następnym roku. „Admired” to odsetek tych, którzy jej używali i chcą kontynuować. Dwa wnioski:

• Satysfakcja jest prawie taka sama: 50,9% dla Vue i 52,1% dla Reacta. Vue jest więc lubianym narzędziem.
• Popularność wyraźnie przemawia za Reactem, zarówno w używaniu, jak i chęci użycia w przyszłości.

To dane z dobrowolnej ankiety, a nie liczba ofert pracy. Nie mam danych o liczbie ofert na Vue w Polsce, więc ich nie podaję. Źródło: Stack Overflow Developer Survey 2025, Technology.

Kiedy wybrać Vue, a kiedy React?

Dlaczego na wejście rekomendujemy React?

To nasze zdanie, a nie fakt obiektywny, więc podaję przesłanki:

• React jest wyraźnie popularniejszy (46,9% kontra 18,4% w ankiecie), więc łatwiej o materiały, odpowiedzi na pytania i przykłady kodu.
• Ekosystem wokół Reacta jest szerszy: oficjalna dokumentacja poleca na nim zbudowane frameworki (Next.js, React Router, Expo do aplikacji mobilnych).
• Uczymy Reacta, więc możemy poprowadzić Cię od podstaw do pierwszej pracy z code review.
• Wszystko, czego uczysz się w Reaccie (komponenty, stan, props), przenosi się na inne narzędzia, także na Vue. Jeśli później trafisz do projektu we Vue, przesiadka jest do zrobienia.

Więcej o Reaccie: czym jest React i dlaczego warto zacząć od niego. Trzecie z największych narzędzi opisuje artykuł czym jest Angular.

Jak zacząć naukę Vue?

1. Podstawy HTML, CSS i JavaScriptu. Sprawdź, czy rozumiesz tablice, funkcje i map: metody tablicowe w JavaScript.
2. Projekt z npm create vue@latest, który tworzy działającą aplikację z Vite.
3. Oficjalny tutorial na vuejs.org, a po nim własny mały projekt, np. wyżej opisana lista zadań.
4. TypeScript: Vue go wspiera (domyślny projekt z create-vue jest w TypeScripcie), a wprowadzeniem do niego jest artykuł TypeScript jako kolejny krok po JavaScript.

Jeśli wolisz zacząć od technologii, na którą jest największy popyt, i uczyć się z mentorem, który sprawdza Twój kod, zapraszam na kurs frontend online. Prowadzi od JavaScriptu przez React (komponenty, kompozycja, stylowanie, routing, testowanie) po TypeScript i Next.js, z code review i wsparciem w rekrutacji. Vue nie jest elementem programu, ale zasady, których się tam nauczysz, przenoszą się również na niego.

Podsumowanie

• Vue to progresywny framework do budowania interfejsów z komponentów .vue, z szablonami i automatyczną reaktywnością.
• W naszej liście zadań różni się od Reacta tym, że stan zmieniasz bezpośrednio (tasks.value.push), a pole formularza łączysz przez v-model.
• W ankiecie Stack Overflow 2025 Vue używa 18,4% programistów zawodowych (React 46,9%), przy podobnej satysfakcji (admired 50,9% do 52,1%).
• Na wejście do frontendu rekomendujemy React, a Vue wybierz, gdy wymaga go firma albo gdy zależy Ci na prostych szablonach.
• Zapraszam na kurs frontend online z mentorem.