We are talking about your favorites - right?

Can someone have favorite coding rules in a style guide? Yes indeed!

Working in teams means you must follow some common rules to work better, avoid errors and don’t ask yourself this “Where is this component again?” question over and over again.

The order of my favorite style guide rule is based on the time you might save if you follow these rules. I mix up strongly recommended, recommended and “use with caution” rules.

1. Component order

Options in your component should be ordered consistently - Oh yeah - my favorite!

The Vue js style guide gives you a recommended order for your component and I totally agree with it but the most important thing is: keep the order consistent in your components!

2. Non-flux state management

Don’t use “this.$root” for global state management. Use Vuex as your preferred global state management.

As a global event bus you can use Vuex’s “subscribe” method to get an event if there is a change in the store. The good thing of “subscribe” is that you not only get the type of the commit you get the payload too. So in most cases there is no need for an additional event bus in your Vue js application.

3. Directive shorthands

Directive shorthands like “:” for v-bind or “@” for v-on should be used always or never.

Use your directives always the same way - shorthand or not. This rule is essential for developers to go fast through all the changes and to understand the code quickly.

4. Single-file component top-level element order

Single-file components should always be in the same tags order <script>, <template>, and <style>.

A very important rule you should follow. The <style> tag in Vue js should be the last one because in a lot of situations you don’t need a separate styling especially if you use Tailwind CSS as your favorite CSS framework.

5. Component files

If you use a build system like webpack, gulp or grunt you should have every component in a separate file.

This is a great way to organize your components in Vue js so as not to struggle with searching for the file which contains the component you were searching for. Having each component in its own file helps a lot.

6. Tightly coupled component names

Child components should have their parents name as a prefix.

This is a great way to show the context of a Vue js component. If a component is used only by its parent component then it should be visible in its name - just make that relationship obvious.

One more thing

This is more a personal thing but I like it if I’m able to see if this is a computed property or a function.

I use a different case style for computed properties and functions. My preferred style for computed properties is snake case and camel case for functions.

computed: {
    route_key: function() {
      return this.$route.path + '/' + this.language
    },
  },
  methods: {
    setViewHeight: function() {
      let vh = window.innerHeight * 0.01
      document.documentElement.style.setProperty('--vh', `${vh}px`)
    },
  },

Hopefully this list of recommended Vue js coding style rules will help you to understand your own components better even after years. So you and your team can work together more effectively.

All links in a practical list