Skip to content

Commit 1b85cdf

Browse files
committed
docs: document generator template inehritance
1 parent f065d18 commit 1b85cdf

File tree

1 file changed

+42
-0
lines changed

1 file changed

+42
-0
lines changed

docs/plugin-dev.md

+42
Original file line numberDiff line numberDiff line change
@@ -198,6 +198,48 @@ module.exports = (api, options, rootOptions) => {
198198
}
199199
```
200200

201+
#### Generator Templating
202+
203+
When you call `api.render('./template')`, the generator will render files in `./template` (resolved relative to the generator file) with [EJS](https://github.com/mde/ejs).
204+
205+
In addition, you can inherit and replace parts of an existing template file (even from another package) using YAML front-matter:
206+
207+
``` ejs
208+
---
209+
extend: '@vue/cli-service/generator/template/src/App.vue'
210+
replace: !!js/regexp /<script>[^]*?<\/script>/
211+
---
212+
213+
<script>
214+
export default {
215+
// Replace default script
216+
}
217+
</script>
218+
```
219+
220+
It's also possible to do multiple replaces, although you will need to wrap your replace strings within `<%# REPLACE %>` and `<%# END_REPLACE %>` blocks:
221+
222+
``` ejs
223+
---
224+
extend: '@vue/cli-service/generator/template/src/App.vue'
225+
replace:
226+
- !!js/regexp /Welcome to Your Vue\.js App/
227+
- !!js/regexp /<script>[^]*?<\/script>/
228+
---
229+
230+
<%# REPLACE %>
231+
Replace Welcome Message
232+
<%# END_REPLACE %>
233+
234+
<%# REPLACE %>
235+
<script>
236+
export default {
237+
// Replace default script
238+
}
239+
</script>
240+
<%# END_REPLACE %>
241+
```
242+
201243
### Prompts
202244

203245
#### Prompts for Built-in Plugins

0 commit comments

Comments
 (0)