Vue 2 nemělo podporu TypeScript, tak jsem začal používat vue-class-component. Vue Class Component ale pro novou verzi Vue 3 nefunguje, škoda, to kdybych býval tušil, tak si počkám rovnou na Vue 3, nonic. Jak dál s Vue.js ?
Z velkou nedůvěrou jsem začal v roce 2021 používat nové Composition API, které funguje ve Vue 3, ale také ve Vue 2 (i když tam je trochu pomalejší, ale funkční). Na začátku roku 2022 byl verze 3 konečně označena jako „default“, předtím bylo Vue 3 dlouhou dobu pouze jako „next“. Sláva, moje důvěra ve Vue 3 stoupla, jdu do toho naplno.
Vue 3 přichází s alternativou k psaní komponent přes Options API, a sice Composition API. Obě API fungují společně, je to pouze na mě, jaké si zvolím. Ale je to velký rozdíl ve stylu psaní kódu, Composition API mi dává mnohem více volnosti a připadá mi to mnohem intuitivnější a snažší. Dokonce jsem našel i návod, jak přepsat komponenty vue-class-component na compositon api. Takže můžu nechat běžet vše postaru, vedle toho psát po novu a nebo částečně přepisovat, paráda, sláva autorovi Vue (Evan You).
Vue 3 Composition API cheet sheet – skvělý seznam toho nejdůležitějšího
<script setup lang=“ts“>
Dalším vývojovým krokem je upgrade Vue 3.0 na Vue 3.2, které přináší podporu použití zjednodušené funkce setup. Mělo by to zrychlit aplikaci a také vývojové prostředí. Kromě toho psaní kódu je mnohem kratší a intuitivnější. Navíc umožní plnou podporu TypeScript pro emits a props.
Přestože Vue 3.2 bylo vydáno v srpnu 2021, tak ještě v dubnu 2022 mi placené vývojové prostředí PhpStorm od JetBrains neumí v aktuální verzi 2021.3.3 „našeptávat import“ Vue komponent, když zadám název souboru např. TradeHistory. Chápu, že ten název pro zrušení „name“ prakticky neexistuje (ve Vue 3.0 jsem měl v Options API např. name: „TradeHistory“ a to ve Vue 3.2 s využitím Composition API a „script setup“ už nechci používat), ale přece z názvu souboru by to jít mělo najít a našeptat soubor pro výběr importu. Dělat to ručně zdržuje práci.