\r\n \u003C/button>\r\n \u003C/label>\r\n\u003C/template>\r\n```\r\n\r\nBuild output:\r\n```js\r\nimport { defineComponent, ref, openBlock, createElementBlock, createTextVNode, toDisplayString, createElementVNode, mergeProps, renderSlot } from \"vue\";\r\nconst _sfc_main = /* @__PURE__ */ defineComponent({\r\n props: {\r\n label: {\r\n type: String,\r\n default: \"\"\r\n }\r\n },\r\n setup(__props) {\r\n const counter = ref(0);\r\n return (_ctx, _cache) => {\r\n return openBlock(), createElementBlock(\"label\", null, [\r\n createTextVNode(toDisplayString(__props.label) + \" \" + toDisplayString(counter.value) + \" \", 1),\r\n createElementVNode(\"button\", mergeProps(_ctx.$attrs, {\r\n onClick: _cache[0] || (_cache[0] = ($event) => counter.value++)\r\n }), [\r\n renderSlot(_ctx.$slots, \"default\")\r\n ], 16)\r\n ]);\r\n };\r\n }\r\n});\r\nexport { _sfc_main as BaseButton };\r\n```\r\n\r\nIn 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\"?\r\n\r\nPackage.json\r\n```json\r\n\"dependencies\": {\r\n \"vue-demi\": \"^0.12.4\"\r\n },\r\n \"devDependencies\": {\r\n \"@types/node\": \"^17.0.21\",\r\n \"@vitejs/plugin-vue\": \"^2.2.0\",\r\n \"@vue/composition-api\": \"^1.4.9\",\r\n \"typescript\": \"^4.5.4\",\r\n \"vite\": \"^2.8.0\",\r\n \"vue\": \"^3.2.25\",\r\n \"vue-tsc\": \"^0.29.8\"\r\n },\r\n \"peerDependencies\": {\r\n \"@vue/composition-api\": \"^1.0.0-rc.1\",\r\n \"vue\": \"^2.0.0 || >=3.0.0\"\r\n },\r\n \"peerDependenciesMeta\": {\r\n \"@vue/composition-api\": {\r\n \"optional\": true\r\n }\r\n },\r\n```\r\n\r\nvite.config.ts\r\n```ts\r\nexport default defineConfig({\r\n plugins: [vue()],\r\n build: {\r\n lib: {\r\n entry: path.resolve(__dirname, \"src/lib.ts\"),\r\n name: \"myLib\",\r\n fileName: (format) => `lib.${format}.js`,\r\n },\r\n rollupOptions: {\r\n // make sure to externalize deps that shouldn't be bundled\r\n // into your library\r\n external: [\"vue\"],\r\n output: {\r\n // Provide global variables to use in the UMD build\r\n // for externalized deps\r\n globals: {\r\n vue: \"Vue\",\r\n },\r\n },\r\n },\r\n },\r\n optimizeDeps: {\r\n exclude: [\"vue-demi\"],\r\n },\r\n});\r\n```",[],145,"Not running on Vue 2 App","2022-09-04T15:48:05Z","https://github.com/vueuse/vue-demi/issues/145",0.69397444,{"description":2922,"labels":2923,"number":2924,"owner":2857,"repository":2858,"state":2892,"title":2925,"updated_at":2926,"url":2927,"score":2928},"I've started to build a library for vue and wanted to make it compatible with vue2 and vue3, so I decided to use VueDemi.\r\n\r\nThe library I'm building is [vue-insta-stories](https://github.com/UnevenSoftware/vue-insta-stories) a component library, I've struggled a little bit to make it compatible with both vue 2 & 3, first I've tried to use \u003Ctemplate> but didn't manage to get it working. I was using rollup to build it. \r\n\r\nSo I checked some examples on the vue-demi repo and discovered that everybody was using render and h to build templates, I switched to render function and everything seems to work nice, except that the first guy using it, was using vue2 and had some errors, after some checking I found out that the h function as different behaviours if used in vue2 and vue3 (I've never used render functions before :D)\r\n\r\nTo fix the issue I made a wrapper to the h function ([h-demi.ts](https://github.com/UnevenSoftware/vue-insta-stories/blob/main/packages/lib/src/utils/h-demi.ts)) basically the function has the same interface as vue2 createElement, and if you are using vue3 it adapts the arguments to the h function.\r\n\r\nThe version of h-demi.ts that I've written is pretty simple, it covers only what I used in vue-insta-stories, and is missing a lot of typings.\r\n\r\nI was wondering if a more robust version of h-demi would be a \"nice to have\" feature inside vue-demi or vue/composition-api. That would help a lot of people that want to build a library and make it compatible with both 2 & 3 versions of vue.\r\n\r\nThat was my first approach to a library, I may also got the whole building process wrong, but I didn't found examples or really good guides, so i mixed up what I've found (if there is an another way of fix the render issues please tell me \u003C3)",[],65,"h-demi - `h` function for Vue 2 and 3","2021-07-15T17:18:20Z","https://github.com/vueuse/vue-demi/issues/65",0.7040799,{"description":2930,"labels":2931,"number":2932,"owner":2857,"repository":2858,"state":2892,"title":2933,"updated_at":2934,"url":2935,"score":2936},"Hello,\r\n\r\nI am working on making a Vue 2 UI library on Vue 3\r\n\r\nI am having a rough time, I cannot conditionally load a set of directives into a component like so\r\n\r\n```js\r\nexport default {\r\n name: 'SomeComponent',\r\n directives: {\r\n tooltip: isVue3\r\n ? require('../../directives/v-tooltip/v-tooltip-vue3')\r\n : require('../../directives/v-tooltip/v-tooltip-vue2'),\r\n```\r\n\r\n\r\nThe two files gets loaded when I run an app, and it breaks the feature whenever I use it with Vue 2 or Vue 3\r\n\r\nDoes is `isVue3` is supposed to be used that way ? \r\n\r\nShould I duplicate my component and import the corresponding version when useful and expose two versions of the same component ?\r\n\r\nI feel like I am missing something, should I enclose the whole directives inside `isVue3` conditionals ? They all get executed even if they're not binded to the component definition.\r\n\r\nIf I import the file corresponding to the version I am using it works fine\r\nelse I got this error message\r\n`\"export 'default' (imported as 'Vue') was not found in 'vue'`",[],148,"conditionally load a directive","2022-03-28T14:08:31Z","https://github.com/vueuse/vue-demi/issues/148",0.7051715,["Reactive",2938],{},["Set"],["ShallowReactive",2941],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fqEtaNJ9pw_nL9Pcp5A_TIPSXt1xMZXf7hm_54SCB0bs":-1},"/vueuse/vue-demi/33"]