fix(plugin-vue): respect __VUE_PROD_DEVTOOLS__ setting #4984

oliverzy · 2021-09-19T10:44:52Z

Description

If user defines VUE_PROD_DEVTOOLS to true, plugin-vue should respect this to make sure the generated code can be compatible with Vue devtools (inlineTemplate and filename)

Additional context

script setup with inlineTemplate as true is not compatible with Vue devtools since it doesn't expose any bindings.
Vue devtools relies on filename to infer the component name for the component using script setup.

What is the purpose of this pull request?

Bug fix

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

Please don't commit style-only changes on files irrelevant to the PR.

# Conflicts: # packages/playground/ssr-vue/example-external-component/ExampleExternalComponent.vue

oliverzy · 2021-09-26T14:33:27Z

OK, it's done.

sodatea · 2021-09-27T08:41:19Z

packages/plugin-vue/src/main.ts

@@ -58,6 +58,7 @@ export async function transformMain(
  // inlined template cannot be individually hot updated.
  const useInlineTemplate =
    !devServer &&
+    !devToolsEnabled &&


Seems exposing __file is enough for the devtool to display the component name, why do you want to disable inlineTemplate?

Because for component with script setup, inlineTemplate as true doesn't expose any setup binding. Vue devtools relies on this to display component setup binding correctly.

Got it.
I have discussed this with Evan today.
As the inlineTemplate option has an impact on the app performance, we believe that it shouldn't be disabled.
We need to find another way to fix this issue. Maybe in another package.

sodatea · 2021-09-27T08:46:49Z

packages/plugin-vue/src/main.ts

@@ -108,7 +109,7 @@ export async function transformMain(
  if (hasScoped) {
    attachedProps.push([`__scopeId`, JSON.stringify(`data-v-${descriptor.id}`)])
  }
-  if (devServer && !isProduction) {
+  if (devToolsEnabled || (devServer && !isProduction)) {
    // expose filename during serve for devtools to pickup
    attachedProps.push([`__file`, JSON.stringify(filename)])


Due to safety concerns, the full path should not be used in production. Please use path.basename(filename).
The development bundle should still use the full path so that users can open the file directly from devtools.

Hi, I've just started using @vitejs/plugin-vue2 in my rollup project, and was surprised to see the full filepath to my modules included in the generated output (as __component__.options.__file), and have not found a way to disable this. Can you advise on how to remove these filepaths?

sodatea

Please remove the changes related to inlineTemplate.
We need to open an issue in the vue-next repo to provide the ability required by Vue DevTools, rather than work around the issue in the Vite plugin.

The __file fix looks good to me.

flxsource · 2022-02-01T09:36:31Z

Please remove the changes related to inlineTemplate. We need to open an issue in the vue-next repo to provide the ability required by Vue DevTools, rather than work around the issue in the Vite plugin.

The __file fix looks good to me.

Has the vue-next (now vuejs/core?) issue been raised? I haven't been able to find anything relevant, but want to make sure I'm not duplicating the issue.

sodatea · 2022-03-01T08:48:44Z

Raised in vuejs/core#5496

patak-dev · 2022-03-24T09:22:52Z

@sodatea is this one ready to merge?

sodatea · 2022-03-24T10:09:32Z

@patak-dev Yeah, I forgot to approve it after pushing…

fix(plugin-vue): respect __VUE_PROD_DEVTOOLS__ setting

9e68255

oliverzy mentioned this pull request Sep 19, 2021

fix: devtools does not show the setup section of a component for vite build --mode development #4773

Closed

9 tasks

Merge branch 'main' into respect-prod-dev-tools-setting

f894299

oliverzy mentioned this pull request Sep 22, 2021

New Vue Script Setup SFC use doesn't always resolve component name resulting in Anonymous Component when using devtools vuejs/devtools#1564

Open

Shinigami92 added the plugin: vue label Sep 22, 2021

patak-dev requested a review from sodatea September 24, 2021 06:58

sodatea requested changes Sep 26, 2021

View reviewed changes

sodatea mentioned this pull request Sep 26, 2021

chore: enforce LF line endings in the repository #5092

Merged

9 tasks

oliverzy added 2 commits September 26, 2021 22:19

chore: merge

3b13f46

# Conflicts: # packages/playground/ssr-vue/example-external-component/ExampleExternalComponent.vue

chore: reset

f2c2715

oliverzy requested a review from sodatea September 26, 2021 23:40

sodatea reviewed Sep 27, 2021

View reviewed changes

sodatea requested changes Sep 27, 2021

View reviewed changes

fix: doesn't expose full file path when production

c1f5c68

oliverzy requested a review from sodatea September 27, 2021 10:37

sodatea requested changes Oct 11, 2021

View reviewed changes

sodatea mentioned this pull request Mar 1, 2022

[compiler-sfc] the inlineTemplate option makes it hard to expose component name to dev tools vuejs/core#5496

Open

sodatea added 2 commits March 24, 2022 16:34

fix: apply review suggestions, always use inlineTemplate in production

fd4c146

chore: merge branch 'main' into respect-prod-dev-tools-setting

143703a

sodatea approved these changes Mar 24, 2022

View reviewed changes

sodatea added the p3-minor-bug An edge case that only affects very specific usage (priority) label Mar 24, 2022

patak-dev merged commit 90e812a into vitejs:main Mar 24, 2022

sodatea mentioned this pull request Mar 24, 2022

feat: add "exposeFilename" option to plugin-vue #5535

Closed

2 tasks

This was referenced Apr 13, 2022

Option to receive the filename (__file) when importing a vue component in production builds #5071

Closed

Setup SFC doesn't compile development with development flag "_file" when component is process for devtools to show setup function #6800

Closed

sodatea mentioned this pull request Oct 18, 2022

feat(plugin-vue): add option inlineTemplate #10505

Closed

9 tasks

blakjak44 mentioned this pull request Jan 8, 2023

fix: make setup script compilation respect __VUE_PROD_DEVTOOLS__ vitejs/vite-plugin-vue#81

Open

9 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(plugin-vue): respect __VUE_PROD_DEVTOOLS__ setting #4984

fix(plugin-vue): respect __VUE_PROD_DEVTOOLS__ setting #4984

oliverzy commented Sep 19, 2021 •

edited

sodatea left a comment

oliverzy commented Sep 26, 2021

sodatea Sep 27, 2021 •

edited

oliverzy Sep 27, 2021 •

edited

sodatea Sep 27, 2021 •

edited

sodatea Sep 27, 2021

oliverzy Sep 27, 2021

derrickb Apr 19, 2023

sodatea left a comment

flxsource commented Feb 1, 2022

sodatea commented Mar 1, 2022

patak-dev commented Mar 24, 2022

sodatea commented Mar 24, 2022

fix(plugin-vue): respect __VUE_PROD_DEVTOOLS__ setting #4984

fix(plugin-vue): respect __VUE_PROD_DEVTOOLS__ setting #4984

Conversation

oliverzy commented Sep 19, 2021 • edited

Description

Additional context

What is the purpose of this pull request?

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

sodatea left a comment

Choose a reason for hiding this comment

oliverzy commented Sep 26, 2021

sodatea Sep 27, 2021 • edited

Choose a reason for hiding this comment

oliverzy Sep 27, 2021 • edited

Choose a reason for hiding this comment

sodatea Sep 27, 2021 • edited

Choose a reason for hiding this comment

sodatea Sep 27, 2021

Choose a reason for hiding this comment

oliverzy Sep 27, 2021

Choose a reason for hiding this comment

derrickb Apr 19, 2023

Choose a reason for hiding this comment

sodatea left a comment

Choose a reason for hiding this comment

flxsource commented Feb 1, 2022

sodatea commented Mar 1, 2022

patak-dev commented Mar 24, 2022

sodatea commented Mar 24, 2022

oliverzy commented Sep 19, 2021 •

edited

sodatea Sep 27, 2021 •

edited

oliverzy Sep 27, 2021 •

edited

sodatea Sep 27, 2021 •

edited