Vue JS javascript framework and why I love it
Several years ago I started building web apps with React JS and I reached the point where I was thinking to myself, does it always have to be so complex even for smaller applications?
Author: Markus A. Wolf
Taipei / Taiwan – UX Designer and product owner - worked in Germany, California / Silicon Valley and now Taiwan for international clients.
What I totally love about Vue js
This is usually the point when you would expect a detailed comparison of Vue js with other js frameworks but not here.
To be honest my favorite thing about Vue js is the documentation. If you start developing in Vue js this is the single point of truth and if you are way more experienced you use the documentation as an - let’s say - external brain repository where you know exactly how to find the things you are searching for.
The second thing I love about Vue js is the elegant programming style and patterns you use. I still enjoy the built in transitions or adding prevented click events to an element is smooth and easy to read. With the last point comes the biggest advantage of Vue js compared to other js frameworks. If you work in teams it is way easier to understand the functionality inside another developers componen. The framework makes it so easy to start with a structured component so even inexperienced developers can’t mess it up.
Latest Vue js articles
Read my latest articles about best practices, components, transitions, styling or data handling in Vue js.
Published: July 2020
How to fix the viewport height issue on mobile browsersIn some mobile browsers the Viewport height is taller than the visible part of the page. Is there a fix and how can I adapt it in Tailwind CSS and Vue JS? Here is the answer to your question!
Published: June 2020
A ready to use Notification Vue js ComponentThis Vue js Component is based on Tailwind CSS so you can easily add it into your existing Tailwind project. If you would like to change some layouts - feel free - and use Tailwinds @apply directive to change the look.
Vue js in comparison to other frameworks like React js
You can find a lot of pros and cons about every js framework on the market. My favorite is the comparison you can find on vuejs.org because it starts with the following sentences.
Being so similar in scope, we’ve put more time into fine-tuning this comparison (with React) than any other. We want to ensure not only technical accuracy, but also balance.
Here you can find a comparison of Vue js with React, Angularjs, Angular, Ember, Knockout, Polymer and Riot.
Vue’s main focus is simplicity
Sometimes having less options leads to more productivity - at least for me.
Vue’s core team created special libraries for routing and state management together with more helpful tools. The main benefit of Vue-router, Vuex and Vue CLI is the fact that these are deeply integrated into Vue and supported by the core team.
Vue CLI gives you an easy way to start a new project and thanks to the Tailwind CSS plugin you can start a new project in seconds and it automatically optimizes your styles thanks to Purge CSS.
Go native
Like React Native Vue startet an official collaboration with Weex so you can use the same Vue component syntax to build native Apps on iOS and Android. Weex calls itself a framework for building performant mobile apps with modern web technology. I haven’t tried it yet but I will start shortly. Do you have any experiences with Weex? Start a conversation with me on Twitter.
<template>
<div style="justify-content:center">
<text class="freestyle">Yo</text>
</div>
</template>
<style scoped>
.freestyle {
color: #41B883;
font-size: 233px;
text-align: center;
}
</style>
All Vue js articles
Published: July 2020
How to fix the viewport height issue on mobile browsersIn some mobile browsers the Viewport height is taller than the visible part of the page. Is there a fix and how can I adapt it in Tailwind CSS and Vue JS? Here is the answer to your question!
Published: June 2020
A ready to use Notification Vue js ComponentThis Vue js Component is based on Tailwind CSS so you can easily add it into your existing Tailwind project. If you would like to change some layouts - feel free - and use Tailwinds @apply directive to change the look.
Published: June 2020
How to update your Vue js app easily - best practiceUsually Vue js updates everything automatically but sometimes its reactivity system is not working for you and you start thinking about: how do I re-render a component.
Published: June 2020
My favorites of the Vue js style guide + one more thingBesides all as essential defined coding rules in Vue js there are a bunch of recommended rules and I want to show you my favorite rules from the Vue js style guide.
Updated: June 2020
Tutorial for a flexible Basic Icon Vue js ComponentAn easy to use Vue js Base Icon Component you can use everywhere in your single or multi page application. Have control over all icons you are using inside your app.
