custom-blocks.md

Blocos customizados

Requer versão 10.2.0+

Você pode definir blocos de linguagem customizados dentro de arquivos *.vue. O conteúdo do bloco customizado será processado pelos carregadores especificados na opção loaders do objeto de configuração vue-loader e então requerido pelo módulo componente. A configuração é semelhante a descrita em Configurações Avançada do Carregador, exceto o uso padrão do nome da tag em vez do atributo lang;

Se for encontrado um carregador correspondente para um bloco customizado, ele será processado. Caso contrário o bloco customizado será simplesmente ignorado. Além disso, se o carregador encontrado retornar uma função, essa função será chamada com o componente do arquivo * .vue como um parâmetro.

Exemplo de arquivo docs simples

Aqui está um exemplo de extração de todos os blocos customizados <docs> em um único arquivo docs;

componente.vue

<docs>
  ## Isto é um componente de exemplo.
</docs>

<template>
  <h2 class="red">{{msg}}</h2>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Olá do Componente A!'
    }
  }
}
</script>

<style>
comp-a h2 {
  color: #f00;
}
</style>

webpack.config.js

// Webpack 2.x
var ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue',
        options: {
          loaders: {
            // extrai todo conteúdo de <docs> em texto bruto
            'docs': ExtractTextPlugin.extract('raw-loader'),
          }
        }
      }
    ]
  },
  plugins: [
    // saída de todos os docs em um único arquivo
    new ExtractTextPlugin('docs.md')
  ]
}

Documentos disponíveis em tempo de execução.

Aqui está um exemplo de injetar os blocos personalizados <docs> no componente para que ele esteja disponível durante o tempo de execução.

docs-loader.js

Para que o conteúdo do bloco personalizado seja injetado, precisamos de um carregador personalizado:

 module.exports = function (source, map) {
   this.callback(null, 'module.exports = function(Component) {Component.options.__docs = ' +
     JSON.stringify(source) +
     '}', map)
 }

webpack.config.js

Agora, vamos configurar o webpack para usar o nosso carregador personalizado para blocos customizados <docs>.

 const docsLoader = require.resolve('./custom-loaders/docs-loader.js')
 
 module.exports = {
   module: {
     rules: [
       {
         test: /\.vue$/,
         loader: 'vue',
         options: {
           loaders: {
             'docs': docsLoader
           }
         }
       }
     ]
   }
 }

component.vue

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

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

<script>
import componentB from 'componentB';

export default = {
  data () {
    return {
      docs: componentB.__docs
    }
  },
  components: {componentB}
}
</script>