Skip to content

Commit 41b8163

Browse files
Add readme
1 parent 272a225 commit 41b8163

File tree

1 file changed

+44
-0
lines changed

1 file changed

+44
-0
lines changed

README.md

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
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

Comments
 (0)