Option to emit component name based on file name with an `NODE_ENV` check for Vite + Vue based libraries

[segevfiner]

Related plugins

• [X] plugin-vue

• [ ] plugin-vue-jsx

Description

When building a Vue component library using Vite and this plugin. Component names are not emitted into productions builds of the library. This hinders debugging using the Vue devtools when using such libraries as all components from the library will show as anonymous component.

Suggested solution

Add an option to keep component names in production build gated behind a NODE_ENV check so that they can be stripped during bundling, that way they can be kept when using a library in development mode.

Alternative

Do this manually in each and every Vue file in the library.

Additional context

Hit this with @tiptap/vue-3 but also with our own custom Vite + Vue based libraries.

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[segevfiner]

So we currently have this:

  define: {
    __VUE_PROD_DEVTOOLS__: JSON.stringify(true),
  },

Which seems to enable this partially. (Is this documented anywhere?)

Which enables this: https://github.com/vitejs/vite-plugin-vue/blob/eef8929c95d8b5cce1385a1d5e60da56a8420c0b/packages/plugin-vue/src/main.ts#L106-L112

So something like this would do it:

  if (devToolsEnabled || (devServer && !isProduction)) {
    // expose filename during serve for devtools to pickup
    attachedProps.push([
      `__file`,
      JSON.stringify(isProduction ? `process.env.NODE_ENV !== "production" ? ${path.basename(filename)} : void 0` : filename),
    ])
  }

But when devtools are enabled in production the user might want to keep the name even in production, so we need a specific flag for this, this is meant for Vue libraries so they can keep names during development but allow Vite to strip them in production.