Custom Block


i’m stuck with Custom Block.

i’m trying to implement related to doc (Custom Blocks | Vue Loader)

But without any success.

Ps: I’m not using webpack config but vue.config.js

I’m trying something like that :




Could you share your full example? It is quite hard to understand what you’re trying to achieve.

I’v made some progress.

I’v add in my vue.config.js after my chainWebPack:

  configureWebpack: config => {
  resourceQuery: /blockType=docs/,
  loader: require('./src/cloader.js')
})  }

But now i’v got an error into the cloader.js

module.exports = function (source, map) {  this.callback(
null,  `export default function (Component) {
    Component.options.__docs = ${
    }  }`,  map  ) }

When i try to build i’v got as error :
TypeError: this.callback is not a function

By the way this loader is just a copy/paste of the one set on page

Hey @Shaan1974,

I’ve reproduced it myself and it worked. I’ve setup a fresh project with Vue CLI.

My vue.config.js looks like:

module.exports = {
  configureWebpack: {
    module: {
      rules: [
          resourceQuery: /blockType=docs/,
          loader: require.resolve('./docs-loader.js')

docs-loader.js is located in the root folder and copied from Vue Loader example.

My component (HelloWorld) has the following piece:




My parent component (App.vue) has the following code:

  <div id="app">
    <h1>{{ docs }}</h1>
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>

import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
  data() {
    return {
      docs: HelloWorld.__docs

The outcome is the following (you can see Testing at the top):

If you want to use chaining (as your example), you should use the chainWebpack property and not configureWebpack.

It will look like this (vue.config.js):

module.exports = {
  chainWebpack: config => {

I’m not super familiar with webpack-chain so it might have a better way to write it.

Thanks for your help but i’m gonna start to think than i’m cursed :slight_smile:
What i have in my vue.config.js

Now it’s ok when i compile, no more errors.

my docs-loader.js


Finally when i try to get a route with a component that have a “docs” tag the .vue file


So i’m continue to investigate


i’v create my selve the “options” for “Component” and it’s seems ok.


And in my component i have:


And i could access to “__docs” inside my component with => “this.$options.options.__docs”

1 Like