Using Vue-i18n Single File Components with Laravel(-mix)

I'm not sure about what you try to do....but here is what I did in order to use translations with i18n

I followed installation process from installation vue-18n and I have the followings

package.json

"dependencies": { 
        "vue-i18n": "^7.3.0"
    }

app.js

require('./bootstrap');
// window.Vue = require('vue');
import Vue from 'vue';
import i18n from 'vue-i18n'

import { translations } from './translations.js'
Vue.use(i18n, translations);
....
const app = new Vue({
    el: '#app',
    translations
});

here is a translations.js file in same folder as app.js for my example

export const translations = {
  'en': {
    'Hello world': 'Hola Mundo',
    'Next': 'Next',
    'Result': 'Result' 
  },
  'fr': { 
    'Hello world': 'Bonjour le monde',
    'Next': 'suivante',
    'Result': 'Résultat'   
  }
}

and here in a component how I get translation Situation.vue

  <button @click="postAnswer">{{ $t('Result', { locale: language  }) }}</button>

Finally set your language in the controller for example, before to call the view containing your vue component

  app()->setLocale( $language->code );
  return view....

I have not changed any other file, just followed the installation process described in the file coming from the same site you mentioned, and it runs perfectly, after npm run watch

Hope that can help you.

Thank you KNietzsche for your detailed response. I'm afraid I'll have to use that method as well, since it seems that laravel mix does not support adding customised code to the module.exports.

The difference between what you showed and what I want, is that in the single file component method, you have once .vue file with:

<i18n>
{
  "en": {
    "hello": "hello world!"
  }
}
</i18n>

<template>
    <p>message: {{ $t('hello') }}</p>
</template>

<script>
export default {
  name: 'app',
  data () { return { locale: 'en' } },
  watch: {
    locale (val) {
      this.$i18n.locale = val
    }
  }
}
</script>

<style>
/* some style*/
</style>

the translations, template, script and style in one file. vue-i18n will first check for local translations, and if not found use global translations (as you defined in app.js). However, to make this work, vue-i18n-loader needs to scrape the content of the i18n-tags to register the translations to the vue-i18n object. For that, the code in the first post needs to be added, which (so far) i'm not able to do...

Solution:

Proposed change in documentation: https://github.com/kazupon/vue-i18n/pull/237

Code: https://stackoverflow.com/questions/46787646/vue-i18n-single-file-component-in-laravel-project/46810772#46810772

Will check your link in the next days, could be interesting, now I understand what you wanted to do with your additional explanations. Nice !

Documentation proposal has been added, and can be seen here: http://kazupon.github.io/vue-i18n/en/sfc.html Scroll down to the laravel-mix part