How to load vue-i18n-loader on @symfony/webpack-encore

Question

I'm using Vue on an symfony 4 application with webpack and with vue-18n working fine. But I want to put the translations on each single file component

My problem is to load de is to load the vue-i18n-loader I tried to load with may ways .... Has anyone done this? Thank you

My webpack file:

var Encore = require('@symfony/webpack-encore');
Encore
    .enableVueLoader(function(options) {
        //i tried to load here
    })
    // ...
    .addLoader({
        test: /\.styl$/,
        loader: 'style-loader!css-loader!stylus-loader'
    })
    ////i tried to load here with addLoader
;
//I tried to load here with module.exports
// export the final configuration
module.exports = Encore.getWebpackConfig();

you look at this docs : https://symfony.com/doc/current/frontend/encore/vuejs.html ? — Jasson Rojas, May 15 '18 at 15:29
yes! I did, I tried to change preLoaders to loaders but doesn't work — cmnardi, May 15 '18 at 15:52

score 3 · Accepted Answer · answered May 15 '18 at 15:28

3

We need to set options in enableVueLoader

.enableVueLoader(function(options) {
   options.loaders.i18n = '@kazupon/vue-i18n-loader'
});

answered May 15 '18 at 15:28

ittus

21,730
5
57
57

score 2 · Answer 2 · answered Nov 06 '19 at 13:57

2

With Webpack 4, you need to use this syntax:

.addRule({
    resourceQuery: /blockType=i18n/,
    type: 'javascript/auto',
    loader: '@kazupon/vue-i18n-loader',
})

answered Nov 06 '19 at 13:57

Florent Poinsaut

51
5

1

This worked for me, I guess it is because I have installed vue-loader 15 instead of vue-loader 14. Maybe it is interesting to note that you need to add this to `webpack.config.js`. – johanv Dec 14 '19 at 10:30

How to load vue-i18n-loader on @symfony/webpack-encore

2 Answers2