feat(plugin-vue): add option inlineTemplate

[sxzz]

Description

Provide inlineTemplate option to control whether to make template inline or not.

Additional context

---

What is the purpose of this pull request?

• Bug fix
• New Feature
• Documentation update
• Other

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines.
• Read the Pull Request Guidelines and follow the Commit Convention.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Ideally, include relevant tests that fail without this PR but pass with it.

[sodatea]

Per my previous discussion with Evan, we want it to always be on in production #4984 (comment)
What's your use case?

[sxzz]

🤔 It's about my vue macros project actually. It doesn't support the inline mode of template, so I want to disable it.

[sodatea]

Which specific feature?
We can try to find out a better way to work around the limitations. But disabling inlineTemplate in production should not be encouraged.

[sxzz]

@sodatea namedTemplate. It's pretty hard to transform the inline template currently because of the shared setup context.

[sxzz]

The core of namedTemplate uses custom blocks to implement. And then custom blocks will be transformed to template with src (aka .vue?vue&type=template). It's hard to transform separate modules into inline functions.

[sapphi-red]

@sxzz How about transforming

<script setup>
const pager = 'top'
</script>

<template name="pager">
  <span>This is pager</span>
</template>

<template>
  <template v-if="pager === 'top'">
    <template is="pager" />
  </template>

  <span>Here is data table</span>

  <template v-if="pager === 'bottom'">
    <template is="pager" />
  </template>
</template>

into

<script setup>
const pager = 'top'
</script>

<template>
  <template v-if="pager === 'top'">
    <span>This is pager</span>
  </template>

  <span>Here is data table</span>

  <template v-if="pager === 'bottom'">
    <span>This is pager</span>
  </template>
</template>

before it's passed to vue plugin?

[sxzz]

@sapphi-red I think yes, but it will generate more duplicated code.

Also, I plan to improve this feature, and here is the example code https://github.com/vuejs/core/discussions/6898#discussioncomment-3905380

For this proposal, it is a bit difficult to do by replacing the template.

[patak-dev]

@sxzz would you move this PR to the new repository for plugin-vue?