Not running on Vue 2 App

[datrinh]

I'm trying to set up a component library with vue-demi (Vite + Vue 3 + Setup Script). Importing thing work fine in Vue 3 apps, but fail for Vue 2. The resulting bundle looks like this:

BaseButton.vue to be imported by Vue2/3 App

<script setup lang="ts">
import { ref } from "vue-demi";

defineProps({
  label: {
    type: String,
    default: "",
  },
});

const counter = ref(0);
</script>

<template>
  <label>
    {{ label }}
    {{ counter }}
    <button v-bind="$attrs" @click="counter++">
      <slot />
    </button>
  </label>
</template>

Build output:

import { defineComponent, ref, openBlock, createElementBlock, createTextVNode, toDisplayString, createElementVNode, mergeProps, renderSlot } from "vue";
const _sfc_main = /* @__PURE__ */ defineComponent({
  props: {
    label: {
      type: String,
      default: ""
    }
  },
  setup(__props) {
    const counter = ref(0);
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("label", null, [
        createTextVNode(toDisplayString(__props.label) + " " + toDisplayString(counter.value) + " ", 1),
        createElementVNode("button", mergeProps(_ctx.$attrs, {
          onClick: _cache[0] || (_cache[0] = ($event) => counter.value++)
        }), [
          renderSlot(_ctx.$slots, "default")
        ], 16)
      ]);
    };
  }
});
export { _sfc_main as BaseButton };

In Vue 2 I run into Uncaught TypeError: Object(...) is not a function error with defineComponent(). I suppose it should be importing from "vue-demi" instead of "vue"?

Package.json

"dependencies": {
    "vue-demi": "^0.12.4"
  },
  "devDependencies": {
    "@types/node": "^17.0.21",
    "@vitejs/plugin-vue": "^2.2.0",
    "@vue/composition-api": "^1.4.9",
    "typescript": "^4.5.4",
    "vite": "^2.8.0",
    "vue": "^3.2.25",
    "vue-tsc": "^0.29.8"
  },
  "peerDependencies": {
    "@vue/composition-api": "^1.0.0-rc.1",
    "vue": "^2.0.0 || >=3.0.0"
  },
  "peerDependenciesMeta": {
    "@vue/composition-api": {
      "optional": true
    }
  },

vite.config.ts

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: path.resolve(__dirname, "src/lib.ts"),
      name: "myLib",
      fileName: (format) => `lib.${format}.js`,
    },
    rollupOptions: {
      // make sure to externalize deps that shouldn't be bundled
      // into your library
      external: ["vue"],
      output: {
        // Provide global variables to use in the UMD build
        // for externalized deps
        globals: {
          vue: "Vue",
        },
      },
    },
  },
  optimizeDeps: {
    exclude: ["vue-demi"],
  },
});

[wobsoriano]

https://github.com/vueuse/vue-demi/issues/136#issuecomment-1066151242

[GUGIG]

As you mentioned, I think this is a matter of the output file importing stuffs from "vue" instead of "vue-demi". Currently I'm thinking this could be solved by tinkering the vite.config.js(ts)file but have no idea how..

[sxzz]

let's track https://github.com/vueuse/vue-demi/issues/152