Naming conventions

kebab-case

SCSS files:

src/
    └── styles/
        └── shared.scss

SCSS variable names and mixins:

$some-breakpoint: 800px;

@mixin viewport-over ($breakpoint) {
    @media (min-width: ($breakpoint)) {
        @content;
    }
}

CSS classes and HTML tags and attributes:

.view-my-component {}
<div class="view-my-component" data-some-attr="Some value"></div>

By extension, declared component names:

export default {
    name: 'my-component'
    ...
}

UPPER_CASE_WITH_UNDERSCORE

vuex mutations

export const mutations = {
    'ITERATE_VALUE': function (state) {
        state.someValue==;
    }
};

export const actions = {
    doSomething: function (context) {
        context.commit('ITERATE_VALUE');
    }
};

CapitalCamelCase

Component names and files:

src/
    └── components/
        └── MyComponent.vue

Models, constructor classes and component names in JS.

import SomeModel from '@models';
var modelInstance = new SomeModel();
modelInstance.doSomething()

camelCase

  • camelCase for all other vuex keys (state variables, getters, actions ...)
  • camelCase for all other exported values in JS
  • camelCase for all other JS files and variables

results matching ""

    No results matching ""