You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
You can define custom language blocks inside `*.vue` files. The content of a custom block will be processed by the loaders specified in the `loaders` object of `vue-loader` options and then required by the component module. The configuration is similar to what is described in [Advanced Loader Configuration](../configurations/advanced.md), except the matching uses the tag name instead of the `lang` attribute.
6
+
7
+
## Example
8
+
9
+
Here's an example of extracting all `<docs>` custom blocks into a single docs file:
10
+
11
+
#### component.vue
12
+
13
+
```html
14
+
<docs>
15
+
## This is an Example component.
16
+
</docs>
17
+
18
+
<template>
19
+
<h2class="red">{{msg}}</h2>
20
+
</template>
21
+
22
+
<script>
23
+
exportdefault {
24
+
data () {
25
+
return {
26
+
msg:'Hello from Component A!'
27
+
}
28
+
}
29
+
}
30
+
</script>
31
+
32
+
<style>
33
+
comp-ah2 {
34
+
color: #f00;
35
+
}
36
+
</style>
37
+
```
38
+
39
+
#### webpack.config.js
40
+
41
+
```js
42
+
// Webpack 2.x
43
+
var ExtractTextPlugin =require("extract-text-webpack-plugin")
44
+
45
+
module.exports= {
46
+
module: {
47
+
rules: [
48
+
{
49
+
test:/\.vue$/,
50
+
loader:'vue',
51
+
options: {
52
+
loaders: {
53
+
// extract all <docs> content as raw text
54
+
'docs':ExtractTextPlugin.extract('raw-loader'),
55
+
}
56
+
}
57
+
}
58
+
],
59
+
plugins: [
60
+
// output all docs into a single file
61
+
newExtractTextPlugin('docs.md')
62
+
]
63
+
}
64
+
}
65
+
```
66
+
67
+
Note that custom blocks would require specific configuration to work properly, so you probably want to avoid distributing reusable components with custom blocks in source form.
Copy file name to clipboardExpand all lines: docs/en/start/spec.md
+3-55Lines changed: 3 additions & 55 deletions
Original file line number
Diff line number
Diff line change
@@ -72,63 +72,11 @@ More details can be found in [Using Pre-Processors](../configurations/pre-proces
72
72
73
73
### Custom Blocks
74
74
75
-
Additional custom blocks can be included in a `*.vue` file for any project specific needs. `vue-loader` will use the tag name to look up which webpack loaders should be applied to the contents of the section. The webpack loaders should be specified in the `loaders` hash of the `vue` section of the webpack configuration in the same way that languages are specified for the standard sections of the file. See [Advanced Loader Configuration](../configurations/advanced.md).
75
+
> Only supported in vue-loader 10.2.0+
76
76
77
-
Example:
78
-
79
-
#### component.vue
80
-
```html
81
-
<unit-test>
82
-
describe('example', function () {
83
-
it('basic', function (done) {
84
-
done();
85
-
})
86
-
})
87
-
</unit-test>
88
-
89
-
<template>
90
-
<h2class="red">{{msg}}</h2>
91
-
</template>
92
-
93
-
<script>
94
-
exportdefault {
95
-
data () {
96
-
return {
97
-
msg:'Hello from Component A!'
98
-
}
99
-
}
100
-
}
101
-
</script>
102
-
103
-
<style>
104
-
comp-ah2 {
105
-
color: #f00;
106
-
}
107
-
</style>
108
-
```
109
-
110
-
#### webpack.config.js
111
-
112
-
```js
113
-
// Webpack 2.x (^2.1.0-beta.25)
114
-
module.exports= {
115
-
module: {
116
-
rules: [
117
-
{
118
-
test:/\.vue$/,
119
-
loader:'vue',
120
-
// vue-loader options go here
121
-
options: {
122
-
loaders: {
123
-
unit-test:'buble-loader',
124
-
}
125
-
}
126
-
}
127
-
]
128
-
}
129
-
}
130
-
```
77
+
Additional custom blocks can be included in a `*.vue` file for any project specific needs, for example a `<docs>` block. `vue-loader` will use the tag name to look up which webpack loaders should be applied to the contents of the section. The webpack loaders should be specified in the `loaders` section of `vue-loader` options.
131
78
79
+
For mode details, see [Custom Blocks](../configurations/custom-blocks.md).
0 commit comments