Vuejs.org: "Editing existing templates" section should be more verbose

[nerdoc]

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.

[NataliaTepluhina]

Thank you for creating the issue! This repository is Vue core docs while CLI docs belong to CLI repo, so the issue/PR should be created in CLI repo as well.

Closing this one but as I am the author of CLI plugins guide, I will work on a PR to make this part more clear 👍

[nerdoc]

Thanks. I would have filed this issue at Vue Cli in the first place - but as the issue template there says, I have to file it using https://new-issue.vuejs.org/?repo=vuejs/vue-cli - and there I can't select the docs as option in "I am opening an issue for".
So that would be another bug ;-)

[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 🤷‍♀

[nerdoc]

But it would be good to open a separate bug for that, right? Should I do that, and copy the relevant sections here into it?

[BashirRezaiee]

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