3 Things That I Love About Vue
Tags: vue, webdev
Published: 2020-08-25 14:56:33

---
title: 3 Things That I Love About Vue
published: true
description: 3 of the biggest reasons I find the Vue Developer Experience so enjoyable! 
tags: vue, webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/cpys6wq67nafqwpwlosd.png
canonical_url: https://terabytetiger.com/lessons/3-things-i-love-about-vue/
---

There are a lot of reasons I enjoy Vue as much as I do, but I want to cover 3 of the biggest reasons I've found the Developer Experience to be so overwhelmingly positive! 

## 1. Documentation Perfection

![woman in yellow standing next to a webpage with a proud stance and one arm behind her head.](https://dev-to-uploads.s3.amazonaws.com/i/6por3f9zd8dkyesf74e2.png)

When people talk about Vue, something that comes up *a lot* is how good Vue's documentation is. And with the release of the Vue 3 beta documentation, they include a [documentation writing guide](https://v3.vuejs.org/guide/contributing/writing-guide.html#principles) which outlines their approach to docs. The combination of these reasons results in a Developer Experience that puts their docs miles ahead of others.

The standout memory of using the docs was the first time I wanted to add [transitions to elements](https://vuejs.org/v2/guide/transitions.html) and the docs not only work through the process but also [include code you can drop in to have elements fade in/out](https://vuejs.org/v2/guide/transitions.html#Transitioning-Single-Elements-Components)! 

## 2. Separation of languages in Single File Components

![woman in purple standing next to a webpage analyzing where things go.](https://dev-to-uploads.s3.amazonaws.com/i/kbo1b4yixf440r1mvxl4.png)

While you can drop Vue in [via CDN](https://vuejs.org/v2/guide/index.html#Getting-Started) to add it in a small portion of your website at a time, Vue really shines with Single File Components (commonly abbreviated to SFC). 

A single file component will have the `.vue` file extension, which works like a superpowered `.html` file. It breaks down to 3 root elements: 

- `<template>` where you put your HTML
- `<script>` where you put your JS
- `<style>` where you put your CSS

Especially as someone looking to jump into a framework from HTML/CSS. This set me up to crush it with the stuff I was familiar with and then focus on adding the JavaScript as needed. 



## 3. Vue UI

![person in purple sitting thoughtfully on the left side of a human-sized laptop showing a generic code interface.](https://dev-to-uploads.s3.amazonaws.com/i/t1bix25bx51c4ita761k.png)

Vue UI is one of those features that does such a spectacular job of helping to onboard beginners to the Command-Line Interface (often abbreviated as CLI) that even as someone that hasn't leveraged its power, I get excited just knowing that it is an option at all. 

Now that I'm done raving - _What is it?_ 

Well, once you have the Vue CLI installed, you can run `vue ui` from your terminal and Vue will spin up a command center of sorts in your browser. To name a few things that this allows you to do outside of the terminal: 

- Create a new project
- Manage/Install plugins
- Update plugins
- Manage dependencies
- run/start npm scripts

This feature is still in beta, but you can [learn more about Vue UI here](https://cli.vuejs.org/guide/creating-a-project.html#using-the-gui).

---

These are 3 of the reasons I've loved the Developer Experience so much with Vue! Have you used Vue? If so, what do you love/hate about Vue? 

Let me know below 👇