vue-i18n single file component in laravel project

Question

Given a Laravel 5.5 project, I want to use the "single file component" of the vue-i18n plugin. Documentation. It seems simple, but I can't get it to work.

app.js

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
    locale: 'en',
    messages:     {
        "en": {
            "word1": "hello world!"
        }
    }
})
Vue.component('test', require('./components/test.vue'));
const app = new Vue({ i18n, el: '#apps'});

components/test.vue

<template>
    {{ $t('word1') }}
    {{ $t('word2') }}
</template>

<i18n>
    {
    "en": {
    "word2": "does this work?"
    }
    }
</i18n>

<script>
    export default {
        name: "test"

        data() {
            return {
                locale: 'en'
            }
        },

        mounted() {},

        watch: {
            locale (val) {
                this.$i18n.locale = val
            }
        }
    }
</script>

word1 is being replaced, however word2 is not. Placing bad syntax between the i18n-tags in the vue file, does NOT result in an error while compiling the files (npm run dev). This makes sense, because I'm missing the:

Taken from the documentation

module.exports = {
  // ...
  module: {
    rules: [
     ...

This is supposed to go in the Webpack configuration. But, where is this file in laravel? All I can find is the webpack.mix.js, but placing this code in there, does not do much... Also making it mix.module.exports does not do the trick. Searching led me to this topic, but i'm not sure if he's asking the same as I am.

The problem: the i18n-tags aren't loaded. The solution is to add the code from the documentation.

My question: Where do I add this code?

Answer 1

To anyone stumbling upon the same problem, I proposed a change in the documentation: https://github.com/kazupon/vue-i18n/pull/237

Laravel mix has its own rules for .vue files. To add the vue-i18n-loader, add the following to webpack.mix.js

mix.webpackConfig({
// ...
module: {
    rules: [
        {
            // Rules are copied from laravel-mix@1.5.1 /src/builder/webpack-rules.js and manually merged with the ia8n-loader. Make sure to update the rules to the latest found in webpack-rules.js
            test: /\.vue$/,
            loader: 'vue-loader',
            exclude: /bower_components/,
            options: {
                // extractCSS: Config.extractVueStyles,
                loaders: Config.extractVueStyles ? {
                    js: {
                        loader: 'babel-loader',
                        options: Config.babel()
                    },

                    scss: vueExtractPlugin.extract({
                        use: 'css-loader!sass-loader',
                        fallback: 'vue-style-loader'
                    }),

                    sass: vueExtractPlugin.extract({
                        use: 'css-loader!sass-loader?indentedSyntax',
                        fallback: 'vue-style-loader'
                    }),

                    css: vueExtractPlugin.extract({
                        use: 'css-loader',
                        fallback: 'vue-style-loader'
                    }),

                    stylus: vueExtractPlugin.extract({
                        use: 'css-loader!stylus-loader?paths[]=node_modules',
                        fallback: 'vue-style-loader'
                    }),

                    less: vueExtractPlugin.extract({
                        use: 'css-loader!less-loader',
                        fallback: 'vue-style-loader'
                    }),

                    i18n: '@kazupon/vue-i18n-loader',
                } : {
                    js: {
                        loader: 'babel-loader',
                        options: Config.babel()
                    },

                    i18n: '@kazupon/vue-i18n-loader',
                },
                postcss: Config.postCss,
                preLoaders: Config.vue.preLoaders,
                postLoaders: Config.vue.postLoaders,
                esModule: Config.vue.esModule
            }
        },
        // ...
    ]
},
// ...
});