VueJS First Impressions

In September I made the jump from React to Vue. This post is just me thinking aloud about my first impressions.

Documentation

I’ve been spoiled throughout the years when it comes to React documentation. It’s hard for other libraries and frameworks to stack up to the level of quality and completeness of the React docs. But I have to say that the Vue docs did not disappoint!

I found that I didn’t need a tutorial to get started with Vue. The VueJS guide documentation was fantastic in getting me up and running efficiently. I loved the interactive nature of the guide where folks can open the developer console and actually make changes to the Vue code that’s used to render the documentation itself 👌.

Also, as a Vue beginner, I find myself often referencing the VueJS V2 API docs.

Vue CLI

The first thing that comes to mind when I think about starting to learn Vue is how impressed I quickly became with the CLI. The CLI features save time and drastically improve developer experience.

$ npm i @vue/cli -g

Similarly to create-react-app we can use the Vue CLI to provision a new application.

$ vue create my-app-name

The difference is that the Vue CLI will ask us questions about configuration preferences, common libraries we’d like to include in our app, etc.

This is very nice.

With React, I’d have to go out and install all of my dependencies one by one (which isn’t the end of the world) but then I’d have to integrate the libraries in my application. The Vue CLI does most of this for us. Definitely a time saver.

Slots

For those of us who are familiar with React, we can think about a slot as children of a React component.

As an example, imagine we have a <navigation-link> component:

<a v-bind:href="url" class="nav-link">
  <slot></slot>
</a>

We could add content inside the slot definition itself as a fallback in case the parent component doesn't provide slot content. It's parent component might look something like:

<navigation-link url="/profile">
  <font-awesome-icon name="user"></font-awesome-icon>
  Your Profile
</navigation-link>

In Vue land we can also use named slots which are a game changer. React devs, no more passing components from a parent to a child via props.

Scoped CSS support

Usually, in the React world I’d reach for Styled Components or Emotion to handle my CSS scoping and CSS-in-JS needs. In the Vue world scoping CSS to a component as well as JS interop is available out-of-the-box.

<template>
  <p>{{ greeting }} World!</p>
</template>

<script>
module.exports = {
  data: function() {
    return {
      greeting: 'Hello',
    };
  },
};
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

This is awesome but one thing that still makes me scratch my head is that style blocks in a Single File Component (SFC) are globally scoped by default. It seems to me that scoping CSS to an SFC would be a much more common use case. In my opinion, instead of adding the scoped attribute to our style tag almost every time we write a new SFC we should be opting into global styling instead.

Liking the Vue from up here

Overall, I’ve enjoyed learning more about VueJS. Mileage may vary but I’ve found that getting productive with Vue has been fairly painless coming from a React background.

I’m looking forward to learning more about Vue (composition API, I’m looking at you). I’m also excited to build more features with it.