In september van vorig jaar werd Vue 3 uitgebracht. In de Vue community werd hier al lang op gewacht. Op Vue Amsterdam 2019 (februari) liet Evan You weten dat ze druk bezig waren met Vue 3. Maar het moest perfect zijn. Hij ontwikkelde met zijn team liever nog 6 maanden aan de nieuwe versie dan het overhaast uit te brengen met als resultaat dat bepaalde zaken nog niet compleet waren. Op Vue Amsterdam 2020 (wederom februari) liet hij weten dat hij en zijn team nog steeds druk waren met Vue 3 en dat het echt bijna bijna af was. En in september 2020 was het dan eindelijk zo ver: Vue versie 3 werd uitgebracht. In deze post leg ik enkele key features uit die Vue 3 zo interessant maken.
Evan You legt de nieuwe features van Vue 3 uit.
Composition API
De Composition API wordt gezien als de heilige graal van Vue 3. Dit zou het leven van developers een stuk makkelijker maken. Dus de voordehandliggende vragen: Wat is het en wat doet het?
De composition API is een manier om logica en template gescheiden te houden in Vue. Dit gebeurt door een setup functie de definiëren. Hierin refereer je naar je logica zodat je templates mooi clean blijven. Bijvoorbeeld: Ik heb een component in Vue waarbij ik een ‘To Do lijst’ wil weergeven. Wanneer ik mijn logica dan gescheiden wil houden kan dit er zo uit zien:
<template>
<div>
Add Todo:
<input type="text" v-model="todo.newTodoValue" />
<button @click="todo.addTodo()">Submit</button>
<span v-for="todoItem in todo.todoList" :key="todoItem.id">
{{ todoItem.value }}
</span>
</div>
</template>
<script>
import { useTodos } from "./hooks/todos";
export default {
name: "app",
setup() {
const todo = useTodos();
return { todo };
},
};
</script>Voor de logica refereer ik dan naar mijn hooks/todos die er zo uit ziet:
export const useTodos = () => {
const state = reactive({
newTodoValue: '',
todoList: [],
addTodo: function () {
let newObject = {
id: Date.now(),
value: state.newTodoValue
};
state.todoList.push(newObject);
state.newTodoValue = "";
}
});
return state;
};
export default useTodos;Dit basic voorbeeld is wellicht niet eens iets wat je meteen in twee bestanden zou opsplitsen. Maar het idee is duidelijk. Wanneer de complexiteit van je componenten toeneemt wordt het steeds zinvoller om template en logica te scheiden. Een volledige werkende versie van bovenstaande code hiervan is hier te vinden.
Vue 2 gebruikers kunnen trouwens ook al gebruik maken van de composition api door middel van deze plugin. In versie 3 is dit uiteraard built in en is er geen plugin meer nodig.
Filters worden vervangen door computed properties.
Filters waren in vue 2 een prima manier om een bestaand stukje data te manipuleren, zonder er een compleet nieuwe variabele voor te maken. Dit was bijvoorbeeld erg gebruikelijk in Vue 2:
Door middel van een pipe pasten we een filter toe:
<h1>{{ message | capitalize }}</h1>In het javascript deel van dit component voegen we vervolgens een filter toe:
filters: {
capitalize: function (value) {
return value.toUpperCase();
}
}Deze opzet is verleden tijd met Vue 3. In plaats van gebruik te maken van filters hebben we nu ‘computed properties’. Het verschil is dat we in plaats van een pipe nu gewoon een property gebruiken.
<h1>{{ capitalizedmessage }}</h1>En deze capitalizedmessage definiëren we vervolgens in onze computed properties:
computed: {
capitalizedmessage() {
return this.message.toUpperCase();
}
}Het grote voordeel hiervan in mijn ogen is dat we geen waardes meer heen en weer hoeven te sturen. We geven simpelweg aan dat we wat met this.message willen doen. Dit geeft net wat meer controle dan wanneer je by default een object mee stuurt waar je wat mee moet.
In een wat bredere zin zijn computed properties uitstekend voor het weergeven van zoekresultaten. Het is namelijk opgezet om heel snel een query uit te kunnen voeren, dus zeker wanneer je grote sets aan data hebt is dit een prima oplossing om de performance toch hoog te houden aan je front end. Performance is dus de grote meerwaarde van computed properties ten opzichte van filters. Ook is dit prima toe te passen voor het weergeven van valuta’s.
Kleine sidenote: Als je bijvoorbeeld heel veel currencies hebt op een scherm voelt het wat onnodig ingewikkeld om voor elk van deze waardes computed properties te maken. Shaul Wildermuth schrijft hier een mooie oplossing voor door middel van een shared filter.
Teleport
Teleport is een manier om een stuk code vanaf je component naar een generiekere plek te verplaatsen. Het is vrij eenvoudig. Allereerst maak je een div aan met een unieke selector. In mijn geval voeg ik deze regel toe aan mijn App.vue:
<div id="modalcontainer"></div>
Wanneer ik deze modalcontainer wil vullen maak ik simpelweg een ‘teleport’ element in mijn component aan:
<teleport to="#modalcontainer">
<h1>Titel</h1>
<p>Tekst</p>
<button>Close</button>
</teleport>Met een CSS selector spreek ik de modalcontainer dus aan, en hiermee vul ik de modalcontainer met de gewenste content. Handig voor modals of error messages die je altijd op dezelfde plek terug wil laten komen. Geen onnodig gedoe met emitters.
Houd er wel rekening mee dat de modalcontainer op een hoog niveau geplaatst moet worden. In de vue documentatie raden ze zelfs aan om dit in je index.html te doen, maar hier blijf ik doorgaans liever van af. Maar plaats ‘m in het hoogste niveau en voordat je je components inlaadt. Anders gaat het niet werken.
Overstappen op Vue 3
Overstappen op Vue 3 biedt een hoop mooie mogelijkheden met zich mee. Het bovenstaande maakt Vue 3 een goede optie voor een frontend framework wanneer je een applicatie gaat bouwen. Het enige waar ik wel voor zou waken is het gebrek aan libraries en plugins die versie 3 ondersteunen. Op dit moment zijn er nog een hoop 3rd party plugins die werkten in versie 2, maar nog niet in versie 3. Wanneer je voorziet dat je een hoop van deze plugins gaat gebruiken kun je misschien beter even wachten tot de Vue community hun plugins ook in Vue 3 heeft toegevoegd.
Nuxt
Nuxt is een meta framework voor Vue dat routing, module imports en rendering een stuk makkelijker en performance vriendelijker maakt. Helaas heeft nuxt nog geen vue 3 support. Dus indien je voor je huidige vue applicatie nuxt gebruikt kun je het beste geduld hebben totdat nuxt vue 3 ondersteunt.
Hi there this is kinda of off topic but I was wondering if blogs use WYSIWYG editors or if you have to manually code with HTML. I’m starting a blog soon but have no coding experience so I wanted to get advice from someone with experience. Any help would be greatly appreciated!