Vee-validate: localize is doesn't work when i using 3.0 (i copy from the offical demo)

[geniustonyas]

Versions

• vee-validate: 3.0.1
• vue: 2.5.2

Describe the bug
localize is doesn't work when i using 3.0

import { validateProvider, localize } from 'vee-validate'; import { zh-CN } from 'vee-validate/dist/local/zh-CN.json'; localize(zh-CN)
but the errors message is still en

by the way, i have been read : https://baianat.github.io/vee-validate/guide/localization.html#i18n

[logaretm]

You didn't follow the example, you need to either pass the locale name then the locale object or an object containing the locale.

import { validateProvider, localize } from 'vee-validate';
import { zh_cn } from 'vee-validate/dist/local/zh-CN.json'; 

// merges the locale, but doesn't activate it
localize({
 zh_cn
});

// merges and activates the locale
localize('zh_cn', zh_cn);

[geniustonyas]

no, I have tried it. like you said:
import { zh_cn } from 'vee-validate/dist/local/zh-CN.json';
localize('zh_cn', zh_cn)
it's dosen't work too.

thanks for you help , i will check it again when i back home

[EveryOneTesla]

it's doesn't work tooooooo!!!
and nothing in the browser console

<template>
  <div class="altbd">
    <header class="alt-Head">
      <router-link tag="a" class="logo" to="/Index">
        <img src="@/assets/imgs/logo/logo.svg" style="height:26px;" />
      </router-link>
      <a class="close" @click="Menus.closeLoginPage()">
        <i class="close-icon icon bs-icon-plain-x"></i>
      </a>
    </header>

    <div style="text-align:center;padding-top:40px;display:none" id="loginLoading">
      <spinner type="android" size="36px"></spinner>
    </div>
    <div class="alt-cont form-group block" id="loginForm">
      <h2>登录</h2>
      <div class="row-form">
        <ValidationProvider name="test" rules="required|email" v-slot="{ errors }">
          <input class="txt" type="text" name="UserName" v-model="loginForm.UserName" id="txt_login_username" maxlength="12" placeholder="账号或手机号码" />
          <span>{{ errors[0] }}</span>
        </ValidationProvider>
      </div>
      <div class="row-form">
        <!-- <ValidationProvider rules="required|min:3,max:12" v-slot="{ errors }"> -->
          <input class="txt" type="password" name="Password" v-model="loginForm.Password" id="txt_login_password" maxlength="16" placeholder="密码" />
        <!-- </ValidationProvider> -->
      </div>
      <div class="row-form ckd">
        <input type="checkbox" checked="checked" />记住登录名
      </div>
      <div class="msg-form" id="loginMsg">用户名或密码不能为空.</div>
      <div class="btn-form">
        <a class="btn btn5" @click="handleLogin()">登录</a>
      </div>
      <div class="mark-form">
        <p>
          忘记密码？<a @click="Menus.closeLoginPage();Menus.openFindPassPage();">立即找回</a>
        </p>
        <p>
          没有账号？<a @click="Menus.openRegPage()">立即注册</a>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import { ValidationProvider, localize, extend } from "vee-validate"
import zh_CN from 'vee-validate/dist/locale/zh_CN.json'
import * as Rules from 'vee-validate/dist/rules'
import Menus from '@/assets/js/Menus'
export default {
  name: 'Login',
  components: { ValidationProvider },
  data() {
    return {
      Menus: Menus,
      loginForm: {
        UserName: '',
        Password: ''
      }
    }
  },

  mounted() {
    localize({ zh_CN });
    localize('zh_CN', zh_CN)
    for (var rule in Rules) {
      extend(rule, Rules[rule])
    }

  },

  methods: {
    handleLogin() {
      console.log(this.loginForm)
      // this.$refs.loginForm.validate(valid => {
      //   if (valid) {
          // this.loading = true
          // 调用store中的登录action设置token
          this.$store.dispatch('user/login', this.loginForm).then(() => {
            this.$router.push({ path: this.redirect || '/' })
            // this.loading = false
          }).catch(error => {
            // this.loading = false
            console.log(error)
          })
        // } else {
        //   console.log('valid failed')
        //   return false
        // }
      // })
    }
  }
}
</script>

[logaretm]

I have created an example for you, seems to work fine:

https://codesandbox.io/s/vue-veevalidate-template-4nj5r

[EveryOneTesla]

thanks!!!!!!!!! very very thanks!!!!!!!
i found it!!!
error code:

import { extend, configure, localize } from 'vee-validate'
import zh from 'vee-validate/dist/locale/zh_CN.json'
import * as Rules from 'vee-validate/dist/rules'

localize("zh_CN", zh);

for (var rule in Rules) {
  extend(rule, Rules[rule])
}

and the right code:

import { extend, configure, localize } from 'vee-validate'
import zh from 'vee-validate/dist/locale/zh_CN.json'
import * as Rules from 'vee-validate/dist/rules'

for (var rule in Rules) {
  extend(rule, Rules[rule])
}

localize("zh_CN", zh);

see. must be extend rules first , then localize . that why my code not work reason

[jwhitmarsh]

see. must be extend rules first , then localize . that why my code not work reason

This is key. It took me quite a while to find this issue and resolve it - I think this should be mentioned in the docs.