Usar Parcel + Vue

Parcel admite Vue automáticamente mediante el complemento @parcel/transformer-vue. Utiliza vue.runtime.esm-bundler.js, el cual expone «feature flags» configurables. Debido a que Parcel no ofrece una forma de configurar estas «features flags» mediante archivos de configuración estándar, se impide la optimización completa (tree-shaking).

Solución 1: Definir las «features flags» como variables globales

Esta opción es la más recomendable para optimizar los paquetes que se generan para producción. Las variables globales se definen en el archivo principal index.js antes de inicializar Vue.

// index.js
window.__VUE_OPTIONS_API__ = true;
window.__VUE_PROD_DEVTOOLS__ = false;
window.__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ = false;

/**
 * Acá va el resto de la configuración...
 * import { createApp } from "vue";
 * import App from "./App.vue";
 * 
 * const app = createApp(App);
 * app.mount("#app");
 */

__VUE_OPTIONS_API__ activa/desactiva el soporte para Options API.
__VUE_PROD_DEVTOOLS__ activa/desactiva el soporte para herramientas de desarrollo en producción.
__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ activa/desactiva advertencias detalladas sobre «hydration mismatches» en producción.

Solución 2: Usar un alias

Esta alternativa le indica a Parcel que use un archivo optimizado para navegadores. Para implementarla, es necesario añadir lo siguiente en package.json:

{
  "alias": {
    "vue": "vue/dist/vue.esm-browser.js"
  },
}

Nota: En producción, usa: vue.esm-browser.prod.js

Esto incluye la totalidad de Vue en tu paquete de producción, con todas las funcionalidades.