Vue.js Component Style Guide


If you have started Vue.js development recently, or even component-based JS frameworks, you have just landed in a new world. You might be a bit lost, and as most developers, you’d rather get started writing code than reading all the docs.

Now that you have experimented a bit, it is time to write better components : easily re-usable, clean code and respectful of Vue.js best practices.

Vue.js component style guide is a set of recommandations that mixes common best practices and opinionated code style rules to make the Vue.js ecosystem more consistent.

Example 1 : keep expressions simple

This one is easy, and you are probably doing it already. But a reminder doesn’t hurt : Do not write long expressions in templates, use computed properties instead. link

Example 2 : make your component’s props API rock-solid

Two things to do here : keep props primitive and harness them.

Keeping options primitive will prevent fellow developers from passing reactive or complex objects to components that might lead to behavior inconsistency.

Making sure every properties have a default fallback function and a type attribute also prevents parent components from passing incorrect values that could lead to potential JS runtime errors.

Many more to see

Check out the Github repo and take the most out of it.

Remember that this guide is meant to be complimentary to the official docs. Docs are still the “source of truth”, but following these recommandations will help you and your team (or the open source world, if you share your code) to write code that is better and easier to maintain.

Latest posts

Use Vue.js to create custom web components

Include Vue.js components in any HTML/JS application

Use a global event bus instead of a state manager

Emit and listen to events across every Vue components of your app

How to use Docker containers for Vue.js applications

Get started with Docker and Vue.js

Hide elements during loading using "v-cloak"

You probably need this directive and didn't know it

Using Bootstrap with Vue.js

Question is : do you really need Boostrap ?

Build, test and deploy your Vue.js app easily with Gitlab

Introduction to Continuous Integration using free Gitlab tools

Another way to declare Vuex modules

`vuex-module` provides a syntax to write your store modules' state, actions, getters, etc. You may want to use it.

Simple state management, simpler than Vuex

Vue Stash makes it easy to share reactive data between components. An alternative to Vuex.

Hybrid Vue.js app in Cordova : desktop or mobile ?

A simple hack to know if the code is executed in a website or in the Cordova version of your app

Does Vue.js require jQuery ?

No it doesn't. But you might find it useful, here's why.