Fiz os passos para tradução pro pt_BR, mas continua em inglês.
Seguem arquivos de como está:
main.js:
import Vue from 'vue';
import App from './App.vue';
import VueResource from 'vue-resource';
import VueRouter from 'vue-router';
import VeeValidate from 'vee-validate';
// tem que vir entre chaves, porque não é default
import { routes } from './routes';
// importando o arquivo `Transform.js`.
import './directives/Transform';
//importar mensagens do VeeValidate em portugues
import msgBR from './pt_BR';
Vue.use(VueResource);
Vue.http.options.root = 'http://localhost:3000';
Vue.use(VueRouter);
Vue.use(VeeValidate, {
locale: 'pt_BR',
dictionary: {
pt_BR: { messages: msgBR }
}
});
const router = new VueRouter({
routes,
mode: 'history'
});
new Vue({
el: '#app',
router,
render: h => h(App)
})arquivo Cadastro.Vue:
<template>
<div>
<h1 class="centralizado">Cadastro</h1>
<h2 class="centralizado">{{ foto.titulo }}</h2>
<h2 v-if="foto._id" class="centralizado">Alterando...</h2>
<h2 v-else class="centralizado">Incluindo...</h2>
<form @submit.prevent="grava()">
<div class="controle">
<label for="titulo">TÍTULO</label>
<input data-vv-as="Título da Foto" name="titulo" v-validate data-vv-rules="required|min:3|max:10" id="titulo" autocomplete="off" v-model="foto.titulo">
<span class="erro" v-show="errors.has('titulo')">{{ errors.first('titulo')}}</span>
</div>
<div class="controle">
<label for="url">URL</label>
<input data-vv-as="URL da Foto" name="url" v-validate data-vv-rules="required" id="url" autocomplete="off" v-model.lazy="foto.url">
<span class="erro" v-show="errors.has('url')">{{ errors.first('titulo')}}</span>
<imagem-responsiva v-show="foto.url" :url="foto.url" :titulo="foto.titulo"/>
</div>
<div class="controle">
<label for="descricao">DESCRIÇÃO</label>
<textarea id="descricao" autocomplete="off" v-model="foto.descricao"></textarea>
</div>
<div class="centralizado">
<meu-botao rotulo="GRAVAR" tipo="submit"/>
<router-link :to="{name: 'home'}"><meu-botao rotulo="VOLTAR" tipo="button"/></router-link>
</div>
</form>
</div>
</template>
<script>
import ImagemResponsiva from '../shared/imagem-responsiva/ImagemResponsiva.vue'
import Botao from '../shared/botao/Botao.vue';
import Foto from '../../domain/foto/Foto.js';
import FotoService from '../../domain/foto/FotoService';
export default {
components: {
'imagem-responsiva': ImagemResponsiva,
'meu-botao': Botao
},
data() {
return{
foto: new Foto(),
id: this.$route.params.id
//resource: {}
}
} ,
methods: {
grava() {
this.$validator
.validateAll()
.then(success => {
this.service
.cadastra(this.foto)
.then(() => {
if(this.id) this.$router.push({ name: 'home'});
this.foto = new Foto();
}, err => console.log(err));
});
}
},
created() {
this.service = new FotoService(this.$resource);
if(this.id) {
this.service
.busca(this.id)
.then(foto => this.foto = foto);
}
}
}
</script>
<style scoped>
.centralizado {
text-align: center;
}
.controle {
font-size: 1.2em;
margin-bottom: 20px;
}
.controle label {
display: block;
font-weight: bold;
}
.controle label + input, .controle textarea {
width: 100%;
font-size: inherit;
border-radius: 5px
}
.centralizado {
text-align: center;
}
.erro {
color: red;
}
</style>Arquivos da pasta SRC :
Portugal:src rito$ pwd
/Users/rito/CursoVueAlura/alurapic/src
Portugal:src rito$
Portugal:src rito$ ls -l
total 32
-rw-r--r-- 1 rito staff 785 30 Mar 13:22 App.vue
drwxr-xr-x 3 rito staff 102 21 Mar 16:23 assets
drwxr-xr-x 5 rito staff 170 22 Mar 19:25 components
drwxr-xr-x 3 rito staff 102 23 Mar 12:31 directives
drwxr-xr-x 3 rito staff 102 30 Mar 11:26 domain
-rw-r--r-- 1 rito staff 741 1 Abr 17:46 main.js
-rw-r--r-- 1 rito staff 2898 1 Abr 17:25 pt_BR.js
-rw-r--r-- 1 rito staff 505 30 Mar 13:33 routes.js
Portugal:src rito$Conteúdo do arquivo pt_BR.js:
!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?module.exports=r():"function"==typeof define&&define.amd?define(r):(e.__locale__pt_BR=e.__locale__pt_BR||{},e.__locale__pt_BR.js=r())}(this,function(){"use strict";var e={after:function(e,r){var n=r[0];return"O campo "+e+" deve estar depois do campo "+n+"."},alpha_dash:function(e){return"O campo "+e+" deve conter letras, números e traços."},alpha_num:function(e){return"O campo "+e+" deve conter somente letras e números."},alpha_spaces:function(e){return"The "+e+" só pode conter caracteres alfabéticos e espaços."},alpha:function(e){return"O campo "+e+" deve conter somente letras."},before:function(e,r){var n=r[0];return"O campo "+e+" deve estar antes do campo "+n+"."},between:function(e,r){var n=r[0],o=r[1];return"O campo "+e+" deve estar entre "+n+" e "+o+"."},confirmed:function(e,r){var n=r[0];return"O campo "+e+" e "+n+" devem ser iguais."},credit_card:function(e){return"O campo "+e+" é inválido."},date_between:function(e,r){var n=r[0],o=r[1];return"O campo "+e+" deve estar entre "+n+" e "+o+"."},date_format:function(e,r){var n=r[0];return"O campo "+e+" deve estar no formato "+n+"."},decimal:function(e,r){void 0===r&&(r=["*"]);var n=r[0];return"O campo "+e+" deve ser numérico e deve conter "+("*"===n?"":n)+" casas decimais."},digits:function(e,r){var n=r[0];return"O campo "+e+" deve ser numérico e ter "+n+" dígitos."},dimensions:function(e,r){var n=r[0],o=r[1];return"O campo "+e+" deve ter "+n+" pixels de largura por "+o+" pixels de altura."},email:function(e){return"O campo "+e+" deve ser um email válido."},ext:function(e){return"O campo "+e+" deve ser um arquivo válido."},image:function(e){return"O campo "+e+" deve ser uma imagem."},in:function(e){return"O campo "+e+" deve ter um valor válido."},ip:function(e){return"O campo "+e+" deve ser um endereço IP válido."},max:function(e,r){var n=r[0];return"O campo "+e+" não deve ter mais que "+n+" caracteres."},max_value:function(e,r){var n=r[0];return"O campo "+e+" precisa ser "+n+" ou menor."},mimes:function(e){return"O campo "+e+" deve ser um tipo de arquivo válido."},min:function(e,r){var n=r[0];return"O campo "+e+" deve conter pelo menos "+n+" caracteres."},min_value:function(e,r){var n=r[0];return"O campo "+e+" precisa ser "+n+" ou maior."},not_in:function(e){return"O campo "+e+" deve ser um valor válido."},numeric:function(e){return"O campo "+e+" deve conter apenas números"},regex:function(e){return"O campo "+e+" possui um formato inválido."},required:function(e){return"O campo "+e+" é obrigatório."},size:function(e,r){var n=r[0];return"O campo "+e+" deve ser menor que "+n+" KB."},url:function(e){return"O campo "+e+" não é uma URL válida."}},r={name:"pt_BR",messages:e,attributes:{}};return"undefined"!=typeof VeeValidate&&VeeValidate&&(VeeValidate.Validator,!0)&&VeeValidate.Validator.addLocale(r),r});
