Vue.js, or simply Vue, is a JavaScript framework used to create user interfaces and interactive web applications. It was developed by Evan You in 2014 and has since gained enormous popularity due to its simplicity, flexibility and efficiency.
The latest version, Vue 3, brings significant improvements that make it even more powerful and easier to use. If you are familiar with HTML, CSS and JavaScript, learning Vue will be a simple process.
Why Vue?
- Easy to learn: If you know HTML, CSS and JavaScript, getting started with Vue is easy.
- Reactive and fast: Vue uses a reactivity system that automatically updates the interface when data changes.
- Reusable components: Vue allows you to create modular components that can be used in different parts of your application.
- Flexible: Vue can be used for small or large projects without any complications.
What is new in Vue3?
Vue 3 introduces significant improvements that make development more efficient and flexible. Some of the most important new functions include:
- API composition: Enables better organisation and reuse of code in large or complex components.
- Improving performance: Vue 3 is faster and leaner than Vue 2 and improves the behaviour in large applications.
- TypeScript support: Vue 3 was developed with TypeScript in mind, which facilitates the integration of static typing.
A simple example:
Here’s a simple example of how Vue works. Imagine you want to display a message on the screen that changes when the user types something into a text field.
<div id="app">
<input v-model="mensaje">
<p>{{ mensaje }}</p>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
mensaje: '¡Hola, Vue 3!'
};
}
});
</script>
In this example:
We use the v-model directive to bind the input field to the message variable.
Every time the user types something, the content of the p will change automatically thanks to Vue’s reactivity.
API composition: A new way to organise code
Vue 3 introduces the Composition API, which is an alternative to the traditional Options API used in previous versions. This new API is particularly useful if you are working with large components and need better code organisation.
Here is an example of the use of the Composition API:
<div id="app">
<button @click="incrementar">Contador: {{ contador }}</button>
</div>
<script>
const { createApp, ref } = Vue;
createApp({
setup() {
const contador = ref(0);
const incrementar = () => contador.value++;
return { contador, incrementar };
}
}).mount('#app');
</script>
What is happening here?
- ref(0): We declare the counter state reactively.
- setup(): In Vue 3, setup() is the heart of the Composition API. Here you can define the state and the functions you will return for use in the template.
- Reactivity: Each time the button is clicked, the counter value is incremented and automatically updated in the interface.
Conclusion
With features such as the Composition API and native TypeScript support, Vue 3 is ready for both small and large projects, and is easy to learn and use.
If you are looking for a modern, fast and developer-friendly framework, Vue 3 is an excellent choice. At WATA Factory we have given it a try and thanks to its performance improvements and new features, we have seen the advantages it offers and how easy it is to develop interactive applications.