Vue.js Documentation 😍

The first thing I do when I pick up a new technology is see how the documentation looks. Is it navigable? Is it clear? Are there examples of actual code I can copy and paste?

Vue does NOT disappoint. It has a really nice navigation pane, which is searchable. Each document has anchored sections, and code snippets.

Vue.js versus React.js 😍

Vue published a detailed comparison between it and other Javascript libraries you might be used to - like React.

The tone of the post is SO CUTE. They very helpfully explain the shortcomings, the similarities, the differences, and the tradeoffs that you get with Vue. It made me immediately love the creators, and it set my expectations really well for what I was going to love/hate about Vue.

Initializing a Vue Project 😍

I followed this setup guide which is pretty much just vue create app-name, and two questions.

It creates a Vue project for you in just 15 files, which I find WAY nicer than when I’m working with a boilerplate React project.

It also includes all of the build/run instructions in the ReadMe file, which I really appreciate because I tend to forget them instantly.

Project Structure 😍

The entrypoint for the project,src/App.vue, had very little in it and it was super easy to pinpoint the line I needed to change to create my own content.

Vue Components 😍

Okay, something I didn’t know I wanted out of a library, and can’t live without is a completely self-contained component. The HTML content, the JavaScript, and the style all living in the same place makes your project structure SO SIMPLE.

I never needed to search for a component’s JavaScript, and I never needed to search for a CSS or SASS file. PRAISED BE

AND CAN WE TALK ABOUT <style scoped>?! I think this is really clever in reducing the amount of css selectors you need to make sure your style doesn’t affect other parts of the app.

There aren’t a whole lot of custom Vue components, which I REALLY appreciate. Components are designed to be built with raw HTML. The one thing I absolutely HATE about React is that there are so many user-created components out there, and you have to get good at figuring out which ones actually work and are easy to consume. I really like not having to worry about that in Vue.

Unit Testing 😍

That handy dandy project boilerplate generated a unit and an end-to-end test. I played with the unit testing by TDDing one of my services, the bulk of the business logic in the app.

Unit testing in the Vue boilerplate project was really well hooked up. I didn’t have to add a bunch of libraries just to test my service.

It. Just. Worked. 👏👏

Vuex and Store 😍

If you’ve done some React development, you might know about Redux. Vue’s brand of state management is called Vuex.

Vuex allows the state to be mutated, but not directly. I think this makes Vuex WAY more intuitive than Redux, and allows for a lot of traceability in terms of which components are mutating which states.

It was easy for me to spin up, and once I moved all of my state management into the src/store/index.js file, my component code cleaned up quite a bit.

I guess I should say, I still haven’t figured out React’s Redux (lol) which can give you an idea of how much easier Vuex was for me.

Project Dependencies 😐

My dependency list ended up looking pretty similar to my React projects.

One dependency I’d like to call out specifically is BootstrapVue which is awesome! I use Bootstrap for everything and the Vue support is up to the regular Bootstrap standard.