|
| 1 | +# vue-extraxt-loader |
| 2 | +> A [Webpack](https://webpack.js.org) loader which extracts a single block from Vue single-file components. |
| 3 | +
|
| 4 | +**What is the difference with [vue-loader](https://github.com/vuejs/vue-loader)?** |
| 5 | + |
| 6 | +Beside importing components, vue-loader can also load custom blocks. But you can't import only a custom block: vue-loader imports the whole file, and attaches the custom block to the component using an user-defined loader. |
| 7 | + |
| 8 | +On the other hand, vue-extraxt-loader imports just the wanted block, ignoring the other parts of the file: this can be useful, for example, for importing a `<unit-test>` block from a testing framework. |
| 9 | + |
| 10 | +## Install |
| 11 | + |
| 12 | +You can install this package either using yarn or npm: |
| 13 | + |
| 14 | +``` |
| 15 | +yarn add --dev vue-extraxt-loader |
| 16 | +
|
| 17 | +# or |
| 18 | +
|
| 19 | +npm install -D vue-extraxt-loader |
| 20 | +``` |
| 21 | + |
| 22 | +## Usage |
| 23 | + |
| 24 | +You can either use this loader inline, or add it to your `webpack.config.js` file. |
| 25 | + |
| 26 | +<a name="warning-inline-loader"></a> |
| 27 | +> ⚠️**WARNING** |
| 28 | +> |
| 29 | +> If `vue-extract-loader` and `vue-loader` are applied to the same import request, `vue-loader` gets ignored. |
| 30 | +> This behavior can be useful if you set `vue-loader` for every `.vue` file, but you should ensure that `vue-extract-loader` doesn't get applied to too much paths. |
| 31 | +> |
| 32 | +> For this reason, it is recommended to use `vue-extract-loader` inline. |
| 33 | +
|
| 34 | +### Options |
| 35 | + |
| 36 | +| Option | Required | Description | |
| 37 | +| ------------- |:-------------:| ----- | |
| 38 | +| `block` | ✔️ | The name of the tag to import | |
| 39 | + |
| 40 | +### Examples and use cases |
| 41 | + |
| 42 | +01. [Basic](./examples/01-base/) - A basic example which shows how to use this loader. |
| 43 | +02. [vue-play](./examples/02-play) - Shows how to define an alias for the loader, so that you can `import "vue-play-loader!./component.vue"`. |
| 44 | +03. [Testing](./examples/03-play) - Sets the loader in `webpack.config.js`, without applying it to too much paths. (see [the previous warning](#warning-inline-loader)) |
0 commit comments