Support Vite Vue Plugin `features.optionsApi: false`

[kevinmarrec]

Context

To optimize production builds, @vitejs/plugin-vue provides an option to drop Options API:
https://github.com/vitejs/vite-plugin-vue/blob/main/packages/plugin-vue/src/index.ts#L126

features.optionsApi

Set to false to disable Options API support and allow related code in
Vue core to be dropped via dead-code elimination in production builds,
resulting in smaller bundles.
- default: true

import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'

import Inspector from 'unplugin-vue-inspector/vite' // OR vite-plugin-vue-inspector

export default defineConfig({
  plugins: [
    Vue({
      features: { 
        optionsApi: false 
      } 
    }), 
    Inspector(),
  ],
})

Description

The Vue Inspector vite plugin has its Overlay written in Options API, so it won't show up if Options API has been dropped through @vitejs/plugin-vue plugin options.

Solutions

Solution 1 (recommended)

Write a Composition API version of the Overlay component and release a Vue 3 only version of this plugin.

Solution 2

Write a Composition API version of the Overlay component and serve it when options.vue === 3 (which is default).
Serve current one (written with Options API) when options.vue === 2

Maybe using vue-demi can help, but it's going deprecated as Vue 2 reached End of Life on December 31st, 2023.

Workaround

Only drop Options API in production based on NODE_ENV

import process from 'node:process'

import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'

import Inspector from 'unplugin-vue-inspector/vite' // OR vite-plugin-vue-inspector

export default defineConfig({
  plugins: [
    Vue({
      features: { 
        optionsApi: process.env.NODE_ENV !== 'production',
      } 
    }), 
    Inspector(),
  ],
})