Skip to content

[doc] added loader suffix: 'vue' -> 'vue-loader' #1043

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 7, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions docs/en/configurations/custom-blocks.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

You can define custom language blocks inside `*.vue` files. The content of a custom block will be processed by the loaders specified in the `loaders` object of `vue-loader` options and then required by the component module. The configuration is similar to what is described in [Advanced Loader Configuration](../configurations/advanced.md), except the matching uses the tag name instead of the `lang` attribute.

If a matching loader is found for a custom block, it will be processed; otherwise the custom block will simply be ignored. Additionally, if the found loader returns a function, that function will be called with the component of the `*.vue` file as a parameter.
If a matching loader is found for a custom block, it will be processed; otherwise the custom block will simply be ignored. Additionally, if the found loader returns a function, that function will be called with the component of the `*.vue` file as a parameter.

## Single docs file example

Expand Down Expand Up @@ -49,7 +49,7 @@ module.exports = {
rules: [
{
test: /\.vue$/,
loader: 'vue',
loader: 'vue-loader',
options: {
loaders: {
// extract all <docs> content as raw text
Expand All @@ -70,9 +70,9 @@ module.exports = {

Here's an example of injecting the `<docs>` custom blocks into the component so that it's available during runtime.

#### docs-loader.js
#### docs-loader.js

In order for the custom block content to be injected, we'll need a custom loader:
In order for the custom block content to be injected, we'll need a custom loader:

``` js
module.exports = function (source, map) {
Expand All @@ -94,7 +94,7 @@ module.exports = {
rules: [
{
test: /\.vue$/,
loader: 'vue',
loader: 'vue-loader',
options: {
loaders: {
'docs': docsLoader
Expand All @@ -108,7 +108,7 @@ module.exports = {

#### component.vue

We are now able to access the `<docs>` block's content of imported components during runtime.
We are now able to access the `<docs>` block's content of imported components during runtime.

``` html
<template>
Expand Down
6 changes: 3 additions & 3 deletions docs/ja/configurations/custom-blocks.md
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ module.exports = {
rules: [
{
test: /\.vue$/,
loader: 'vue',
loader: 'vue-loader',
options: {
loaders: {
// 全ての <docs> の内容は raw text として展開されます
Expand All @@ -70,7 +70,7 @@ module.exports = {

`<docs>`カスタムブロックをコンポーネントに注入して実行時に利用できるようにする例です。

#### docs-loader.js
#### docs-loader.js

カスタムブロックコンテンツを注入するためには、カスタム loader が必要です:

Expand All @@ -94,7 +94,7 @@ module.exports = {
rules: [
{
test: /\.vue$/,
loader: 'vue',
loader: 'vue-loader',
options: {
loaders: {
'docs': docsLoader
Expand Down
4 changes: 2 additions & 2 deletions docs/kr/configurations/custom-blocks.md
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ module.exports = {
rules: [
{
test: /\.vue$/,
loader: 'vue',
loader: 'vue-loader',
options: {
loaders: {
// 모든 <docs>의 내용을 원문 그대로 추출합니다
Expand Down Expand Up @@ -94,7 +94,7 @@ module.exports = {
rules: [
{
test: /\.vue$/,
loader: 'vue',
loader: 'vue-loader',
options: {
loaders: {
'docs': docsLoader
Expand Down
2 changes: 1 addition & 1 deletion docs/kr/features/css-modules.md
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ module: {
rules: [
{
test: '\.vue$',
loader: 'vue',
loader: 'vue-loader',
options: {
cssModules: {
localIdentName: '[path][name]---[local]---[hash:base64:5]',
Expand Down
6 changes: 3 additions & 3 deletions docs/kr/options.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ module.exports = {
rules: [
{
test: /\.vue$/,
loader: 'vue',
loader: 'vue-loader',
options: {
// vue-loader 옵션
}
Expand Down Expand Up @@ -65,14 +65,14 @@ module: {

- 타입: `{ [lang: string]: string }`
- only supported in >=10.3.0
- 10.3.0 버전 이후 지원
- 10.3.0 버전 이후 지원

`loaders` 설정의 포맷과 동일하지만, `preLoaders`는 기본 로더보다 우선하여 language block에 적용됩니다. 이를 사용하면 language block을 미리 처리할 수 있습니다. (일반적인 사용 사례는 빌드 타임에 국제화를 적용하는 경우입니다.)

### postLoaders

- 타입: `{ [lang: string]: string }`
- 10.3.0 버전 이후 지원
- 10.3.0 버전 이후 지원

`loaders` 설정의 포맷과 동일하지만, `preLoaders`는 기본 로더보다 나중에 적용됩니다. 이를 사용하면 language block에 대한 사후 처리를 할 수 있습니다. 약간 복잡합니다.

Expand Down
16 changes: 8 additions & 8 deletions docs/pt_BR/configurations/custom-blocks.md
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ module.exports = {
rules: [
{
test: /\.vue$/,
loader: 'vue',
loader: 'vue-loader',
options: {
loaders: {
// extrai todo conteúdo de <docs> em texto bruto
Expand Down Expand Up @@ -88,13 +88,13 @@ Agora, vamos configurar o webpack para usar o nosso carregador personalizado par

``` js
const docsLoader = require.resolve('./custom-loaders/docs-loader.js')

module.exports = {
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue',
loader: 'vue-loader',
options: {
loaders: {
'docs': docsLoader
Expand All @@ -105,22 +105,22 @@ Agora, vamos configurar o webpack para usar o nosso carregador personalizado par
}
}
```

#### component.vue

Agora podemos acessar o conteúdo do bloco `<docs>` de componentes importados durante o tempo de execução.

``` html
<template>
<div>
<component-b />
<p>{{ docs }}</p>
</div>
</template>

<script>
import componentB from 'componentB';

export default = {
data () {
return {
Expand Down
10 changes: 5 additions & 5 deletions docs/ru/configurations/custom-blocks.md
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ module.exports = {
rules: [
{
test: /\.vue$/,
loader: 'vue',
loader: 'vue-loader',
options: {
loaders: {
// извлечь всё содержимое тегов <docs> как обычный текст
Expand All @@ -70,9 +70,9 @@ module.exports = {

Вот пример того, как можно встроить пользовательские блоки `<docs>` в компонент, чтобы он был доступен во время выполнения.

#### docs-loader.js
#### docs-loader.js

Для инъекции содержимого пользовательского блока понадобится пользовательский загрузчик:
Для инъекции содержимого пользовательского блока понадобится пользовательский загрузчик:

``` js
module.exports = function (source, map) {
Expand All @@ -94,7 +94,7 @@ module.exports = {
rules: [
{
test: /\.vue$/,
loader: 'vue',
loader: 'vue-loader',
options: {
loaders: {
'docs': docsLoader
Expand All @@ -108,7 +108,7 @@ module.exports = {

#### component.vue

Теперь мы можем получить доступ к содержимому блока `<docs>` импортированного компонента на этапе выполнения.
Теперь мы можем получить доступ к содержимому блока `<docs>` импортированного компонента на этапе выполнения.

``` html
<template>
Expand Down
4 changes: 2 additions & 2 deletions docs/zh-cn/configurations/custom-blocks.md
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ module.exports = {
rules: [
{
test: /\.vue$/,
loader: 'vue',
loader: 'vue-loader',
options: {
loaders: {
// 提取 <docs> 中的内容为原始文本
Expand Down Expand Up @@ -95,7 +95,7 @@ module.exports = {
rules: [
{
test: /\.vue$/,
loader: 'vue',
loader: 'vue-loader',
options: {
loaders: {
'docs': docsLoader
Expand Down