This cookbook is similar to Vue cookbook but contains our custom recipes for some specific cases.
For form validation we use Vuelidate
export default Vue.extend({
...
validations: {
myField: {
required,
minLength: minLength(4),
between: between(20, 30)
},
myOtherField: {
required,
myCustomValidatorFunction
}
}
...
})
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>
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');
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));
}
};