"Editing existing templates" section should be more verbose

At the docs of vue-cli for creating new templates, you say “you can inherit and replace parts of an existing template file (even from another package) using YAML front-matter”. But it’s not clear where to put this content. (for a beginner like me) Should it be a new file in templates, or a long string in index.js, etc.

I Always get the error:

Error: Cannot find module ‘App.vue’ from ‘/home/…/vue-cli-plugin-extensionpoints/generator/template/src’

You can only specify the exact path in the extends YAML field. What If I want to extend a file of the current project (the project the vue plugin is applied to) - you don’t know the name yet.

This should be addressed a bit more clearly, like:

In addition, you can inherit and replace parts of an existing template file (even from another package) using YAML front-matter. Just place a file in the templates folder using the same path as the targeted file, with the following content:

Or something similar. But I didn’t find a solution until now. Couldn’t find on in the internet neither.

If you give me a hint I can create a PR too.

[BashirRezaiee]

Hi, I have the same problem, Is there any solution?

[NataliaTepluhina]

Unfortunately, it doesn’t seem YAML Frontmatter can handle relative paths nicely. I’ve been able modifying App.vue with the absolute path but relative is an issue. Even if we pass the correct resolved path from generator it resolves in the template but not in the YAML header:

// generator.js

const appPath = api.resolve(`./src/App.vue`)

api.render('./template', {
  ...options,
  appPath
});

---
extend: <%= appPath %>  // this does not resolve
replace: !!js/regexp /<script>[^]*?<\/script>/
title: <%= appPath %>
---

<script>
export default {
  <%= appPath %> // this resolves to correct absolute path
}
</script>

Will look into it further 🤷‍♀