Custom Block

Hello,

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 :

config.module.rule(‘docs’).resourceQuery(/blockType=docs/).type(‘javascript/auto’).use(‘docs’).loader(require(’@/docs-loader.js’))

Thanks
Shaan

Hey,

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 => {
config.module.rules.push({
  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 = ${
      JSON.stringify(source)
    }  }`,  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
https://vue-loader.vuejs.org/guide/custom-blocks.html#example

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:

<template>
...
</template>

<docs>
Testing
</docs>

<script>
...
</script>

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

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

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data() {
    return {
      docs: HelloWorld.__docs
    };
  },
}
</script>

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 => {
    config.module
      .rule('docs-loader')
        .resourceQuery(/blockType=docs/)
        .use('loader')
          .loader('./docs-loader.js')
  },
};

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

image

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

image

So i’m continue to investigate

Hello,

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

image

And in my component i have:

image

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

1 Like