Cookbook

Cookbook.md

This cookbook is similar to Vue cookbook but contains our custom recipes for some specific cases.

Form validation

For form validation we use Vuelidate

export default Vue.extend({
  ...
  validations: {
    myField: {
      required,
      minLength: minLength(4),
      between: between(20, 30)
    },
    myOtherField: {
      required,
      myCustomValidatorFunction
    }
  }
  ...
})

Translations

For translations we use Vue-i18n with YAML for translations (webpack config required).

en:
  someKey: "Some text"
  someOtherKey: "Some link text"
ru:
  someKey: "Какой-то текст"
  someOtherKey: "Какой-то текст для ссылки"

<i18n src="./SomeComponentTranslations.yml"></i18n>

<template>
  <div>
    <span>{{ $t('someKey') }}</span>
    <a>{{ $t('someOtherKey') }}</a>
  </div>
</template>

HTTP and REST

We use Axios for HTTP/REST calls.

  axios.get<IData>('some/data/url');
  ...
  axios.post<IData>('some/data/url', payload);
  ...
  axios.delete<IData>('some/data/url');

HTTP service

One good pattern Angular thought us - is to use a service for HTTP calls. Since we don't have Dependency Injection in Vue it can't be used the same way it is used in Angular (we should avoid manually creating instances of services).

Assuming we use TypeScript and axios here's the pattern we use for HTTP service: class with static methods.

Example

import axios from 'axios';

interface IData { 
  myDataField: string;
}

export default class MyDataService {
  
  /**
   * Get some data
   * @param {string} id some parameter
   * @returns {AxiosPromise<IData>}
   */
  static getSomeDataById(id: string) {
    return axios.get<IData>('some/data/url');
  }

To use like this only from store action:

interface IDataState {
  myStateField: boolean;
}

export const actions: ActionTree<IDataState, {}> = {
  [GET_SOME_DATA]({commit}, id: string) {
    MyDataService.getSomeDataById(id)
      .then(res => commit(SET_MY_DATA, res.data));
  }
};