Jak zbudować i opublikować wtyczkę do Vue 3: szablon Vue Plugin Template

vue-plugin-template to darmowy szablon startowy Monterail na licencji MIT do tworzenia wtyczek do Vue 3 w TypeScript i publikowania ich na npm. Konfiguracja builda, deklaracji typów, testów, lintingu, CI i lokalnego playgroundu jest już gotowa, więc pierwszy commit możesz poświęcić samej wtyczce.

Jeśli masz za sobą budowę więcej niż jednej wtyczki do Vue, pewnie zauważyłeś pewien schemat: wciąż od nowa rozwiązujesz te same nudne problemy. Struktura projektu, konfiguracja builda, ustawienia TypeScript, dokumentacja, publikacja na npm, przykłady… nic z tego nie jest trudne, ale wszystko to zabiera czas, który wolisz poświęcić na pomysł, który naprawdę chcesz dostarczyć.

To właśnie ten problem doprowadził do powstania vue-plugin-template.

Repozytorium: https://github.com/monterail/vue-plugin-template

W tym artykule wyjaśniamy dlaczego ten szablon powstał, jak łączy się z naszą inicjatywą Vue Plugins i jakie ma miejsce w oficjalnym podejściu Vue do wtyczek.

Po co ci szablon do wtyczek Vue?

Oficjalna dokumentacja pokazuje, jak napisać wtyczkę do Vue, ale nie jak dostarczyć ją jako pakiet. Vue ma już świetną dokumentację wtyczek. W oficjalnym przewodniku Vue przeczytasz, jak stworzyć wtyczkę, zwykle od czegoś w tym rodzaju:

export default {
  install(app, options) {
    app.config.globalProperties.$myPlugin = () => {}
  }
}

To świetnie działa, gdy:

• eksperymentujesz

• tworzysz coś pod konkretną aplikację

• nie planujesz publikacji

Ale kiedy chcesz już:

• opublikować pakiet na npm

• zapewnić pełne wsparcie dla TypeScript

• dostarczać ESM i CJS

• przygotować przykłady i dokumentację

• utrzymać stabilne API

…nagle jesteś daleko poza zakresem dokumentacji.

Właśnie tę lukę wypełnia vue-plugin-template.

Czym jest vue-plugin-template?

vue-plugin-template to konkretny, ale elastyczny punkt wyjścia do tworzenia wtyczek do Vue 3 z myślą o publikacji. Obejmuje:

• tworzenie wtyczek do Vue 3

• ich dokumentowanie

• lokalne testowanie

• publikację na npm

Daje ci gotową do użycia w produkcji bazę, bez zamykania się na konkretny pomysł na wtyczkę, i korzysta z tych samych nowoczesnych narzędzi Vue, na których prawdopodobnie już działają twoje aplikacje. Na start dostajesz:

• strukturę wtyczki do Vue 3

• konfigurację z TypeScript w centrum

• build oparty na Vite

• poprawnie zdefiniowane exporty dla npm

• aplikację przykładową do lokalnych testów

• strukturę README, która nie zaczyna się od pustej strony

Wszystkie nudne elementy masz już rozwiązane.

Jak zacząć pracę nad wtyczką do Vue z vue-plugin-template?

Sklonuj repozytorium, zainstaluj zależności, zmień nazwę pakietu i uruchom playground. Własną wtyczkę działającą lokalnie możesz mieć w kilka minut:

1. Pobierz kod: git clone https://github.com/monterail/vue-plugin-template.git my-plugin

2. Zainstaluj zależności: npm install

3. Dostosuj szablon do siebie: zaktualizuj name, description i author w package.json, zmień nazwę wtyczki w src/index.ts i zastąp przykładowe komponenty oraz composables własnymi.

4. Twórz na bazie prawdziwej aplikacji: npm run dev uruchamia playground, a npm run test:watch trzyma testy w działaniu obok niego.

5. Opublikuj: npm login, a potem npm publish.

Publikowanie wtyczek Vue na npm bez bólu

Publikacja sprowadza się do jednego polecenia, bo szablon już obsługuje formaty wyjściowe, exporty i typy. Chcieliśmy usunąć tarcie z publikowania wtyczek do Vue.

Szablon jest skonfigurowany tak, że:

• buildy generują poprawne formaty wyjściowe

• exporty pakietu są jawnie zdefiniowane

• użytkownicy dostają poprawne typy

Nie musisz już więcej googlować „Vue plugin npm ESM CJS TypeScript”.

Wystarczy:

npm publish

To naprawdę wystarczy, bo skrypt prepublishOnly uruchamia pełny build tuż przed wysłaniem, więc nie opublikujesz przypadkiem nieaktualnego dist. Potrzebujesz tylko nazwy pakietu, która nie jest jeszcze zajęta na npm, oraz konta, na które zalogujesz się przez npm login.

Dlaczego warto użyć szablonu z jasno określonym podejściem?

Bo szablon, który podejmuje za ciebie konkretne decyzje, oszczędza ci konieczności podejmowania ich samodzielnie. Tak, ten szablon dokonuje części wyborów za ciebie.

I właśnie o to chodzi.

Szablony, które próbują wspierać każde możliwe podejście, zwykle kończą tak, że nie pomagają nikomu. vue-plugin-template odzwierciedla:

• realne użycie w produkcji

• wnioski z pracy nad wieloma wtyczkami

• zgodność z oficjalnymi API Vue

Postawienie na TypeScript odpowiada temu, gdzie dziś jest społeczność: według naszego State of Vue.js Report 2025 TypeScript jest obecnie pierwszym wyborem dla 82% deweloperów Vue.

Jeśli nie podobają ci się decyzje, które podjęliśmy, to wciąż tylko szablon. Zrób forka, dopasuj go i przejmij nad nim pełną kontrolę!

Jak vue-plugin-template ma się do vue-plugins.org?

Szablon to punkt startowy dla wtyczki do Vue, a vue-plugins.org to miejsce, w którym ludzie ją znajdują. Vue Plugins to nasz kuratorowany katalog wtyczek Vue.js. We wrześniu 2026 roku obejmował około 100 wtyczek z kategorii takich jak routing, zarządzanie stanem, formularze, animacje, frameworki UI i testowanie, z możliwością sortowania według liczby pobrań i gwiazdek na GitHubie.

To nie jest przypadkowy poboczny projekt. To podstawa, którą rekomendujemy dla każdej nowej wtyczki mającej trafić do katalogu. Sam katalog też jest open source (github.com/monterail/vue-plugins), a jego ścieżka „Create Your Own Plugin” prowadzi prosto do tego szablonu. Wtyczki, które zaczynają tutaj:

• startują z tej samej bazy

• korzystają z tych samych narzędzi

• trzymają się tych samych zasad publikacji

Ta spójność ułatwia utrzymanie i sprawia, że dokładanie kolejnych wkładów nie wydaje się tak trudne. Jeśli widziałeś jedną taką wtyczkę, to w praktyce widziałeś już wszystkie.

Dla kogo jest vue-plugin-template?

Dla deweloperów, którzy planują opublikować wtyczkę do Vue i wolą pominąć etap konfiguracji. Ten szablon dobrze sprawdzi się, jeśli:

• planujesz opublikować wtyczkę do Vue

• zależy ci na dobrym developer experience (DX)

• chcesz uniknąć zmęczenia konfiguracją

• lubisz uczyć się na bazie istniejących, sprawdzonych wzorców

Jeśli po prostu składasz coś w ramach jednej aplikacji, rozdział plugins w oficjalnym przewodniku Vue nadal będzie najlepszym punktem wyjścia.

Czy warto użyć vue-plugin-template przy kolejnej wtyczce?

Jeśli planujesz publikację, to tak: vue-plugin-template powstał po to, żeby właściwe rozwiązanie było najłatwiejsze do wdrożenia.

Łączy trzy światy:

• oficjalny model wtyczek Vue

• realną dystrybucję przez npm

• ekosystem Vue Plugins

Jeśli oszczędzi ci choć jedno popołudnie pracy nad konfiguracją, to znaczy, że nasza misja się powiodła.

Śmiało z niego korzystaj, rób forka albo go ulepszaj. Właśnie po to powstał. A jeśli twoja wtyczka jest częścią większego produktu Vue i potrzebujesz zespołu, który za nią stanie, deweloperzy Vue.js z Monterail chętnie pomogą.