0

Recién estoy entrando en el mundo de VueJS y me gustaría ¿Cómo detectar el idioma del navegador? ya que en base a esto deseo ejecutar un metodo en VueJS, en Javascript se que lo puedo hacer de esta forma:

if (navigator.appName == 'Netscape')
var lenguage = navigator.language;
else
var lenguage = navigator.browserLanguage;
if (lenguage.indexOf('en') > -1){
 alert('Ingles');
}
else if (lenguage.indexOf('es') > -1){
 alert('Español');
}
else if (lenguage.indexOf('fr') > -1){
  alert('Frances');
}
else if (lenguage.indexOf('pt') > -1){
  alert('Portugues');
}
else{
  alert('Otro');  
}

Pero no tengo idea de como hacerlo en VueJS y no encuentro información al respecto.

4
  • En VueJS también puedes utilizar ese código, funcionará igualmente. Aclara un poco más tu duda. el 6 ene. 2018 a las 15:36
  • Yo se que funcionaria pero como mencione en la pregunta necesite que se ejecute un metodo de VueJS al detectar el idioma del navegador por eso pregunto si se puede hacer en VueJS.
    – Andrés
    el 6 ene. 2018 a las 16:01
  • Puedes ejecutar tú código el las funciones de ciclo de vida de VueJS, created o mounted, depende de qué necesites. Por ejemplo: created() { var idioma = getIdioma(); // ejecutar la función dependiendo del idioma } el 6 ene. 2018 a las 16:10
  • Ps estaba pensando como alternativa algo así como lo planteas, podrías ser tan amable de publicar una respuesta ejemplo implementando el JS que puse para llamar algún método 'x' de VueJSentiendo por getIdioma() que seria la función JS que me retornaría el resultado y en base a eso llamaría el método de VueJS
    – Andrés
    el 6 ene. 2018 a las 16:18

1 respuesta 1

1

Como te he comentado, la solución sería ejecutar tú código en el hook created:

new Vue({
  el: '#app',
  template: '<h1>{{idioma}}</h1>',
  data() {
    return {
      idioma: null,
      functions: {
        'es-ES'() {
          console.log('Español')
        }
      }
    }
  },
  created() {
    this.idioma = navigator.browserLanguage || navigator.language
    this.functions[this.idioma]()
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>

<div id="app"></div>

Si lo deseas también puedes definir el idioma en data directamente. Y en alguno de los ciclos de vida de Vue que más gustes llamar a tu función.

También he movido la función a la propiedad methods de Vue.

new Vue({
  el: '#app',
  template: '<h1>{{idioma}}</h1>',
  data() {
    return {
      idioma: navigator.browserLanguage || navigator.language
    }
  },
  methods: {
    'es-ES'() {
      console.log('Español')
    }
  },
  created() {
    this[this.idioma]()
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>

<div id="app"></div>

2
  • Gracias por darle claridad a mi vida jajajaja este ejemplo me sera de mucha utilidad, nuevamente Gracias por responder.
    – Andrés
    el 6 ene. 2018 a las 16:26
  • De nada!! Saludos!! =) el 6 ene. 2018 a las 16:27

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.