Skip to content

Commit

Permalink
📝 docs(vuepress): update sfc docs (#479) by @JBtje
Browse files Browse the repository at this point in the history
* Update sfc.md

I tested the added code with Laravel-mix 4-beta.2 and Vue-loader 15.4.2
Part of me thinks the vue-loader v15 code also works with Laravel-mix 2+, but not sure about that (not tested)

* Update sfc.md
  • Loading branch information
JBtje authored and kazupon committed Dec 11, 2018
1 parent 7ff4394 commit b4a8c27
Showing 1 changed file with 28 additions and 4 deletions.
32 changes: 28 additions & 4 deletions vuepress/guide/sfc.md
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ npm i --save-dev @kazupon/vue-i18n-loader

For Webpack the configuration below is required:

for vue-loader v15 or later :
for vue-loader v15 or later:
```js
module.exports = {
// ...
Expand Down Expand Up @@ -105,7 +105,7 @@ module.exports = {

In order to do that we have to create a `vue.config.js` at the root of our project. Once done that, we have to include the following:

for vue-loader v15:
for vue-loader v15 or later:
```js
module.exports = {
chainWebpack: config => {
Expand Down Expand Up @@ -145,6 +145,30 @@ If you want to read more about modifying the existing configuration [click here]

## Laravel-Mix

for Laravel-mix 4 with vue-loader v15 or later:
```js
// Extend Mix with the "i18n" method, that loads the vue-i18n-loader
mix.extend( 'i18n', new class {
webpackRules() {
return [
{
resourceQuery: /blockType=i18n/,
type: 'javascript/auto',
loader: '@kazupon/vue-i18n-loader',
},
];
}
}(),
);

// Make sure to call the .i18n() (to load the loader) before .js(..., ...)
mix.i18n()
.js( 'resources/js/App.js', 'public/js/app.js' )
...
```

for Laravel-mix 2 with vue-loader v14:

As of [V2.1](https://github.com/JeffreyWay/laravel-mix/releases/tag/v2.1) of Laravel-mix, you can add custom rules via mix.extend(). Laravel mix already has its own rules for handling .vue files. To add the `vue-i18n-loader`, add the following to `webpack.mix.js`

```js
Expand Down Expand Up @@ -185,7 +209,7 @@ ja:

Webpack conf the below:

for vue-loader v15:
for vue-loader v15 or later:
```js
// Vue CLI 3.0
module.exports = {
Expand Down Expand Up @@ -231,7 +255,7 @@ module.exports = {

## Multiple custom blocks

you can be used the locale messages with multiple `i18n` custom block.
You can be used the locale messages with multiple `i18n` custom block.

```html
<i18n src="./common/locales.json"></i18n>
Expand Down

0 comments on commit b4a8c27

Please sign in to comment.