vue将共享计算函数编译到单独的包中

Question

如何在不同的包之间共享通用的vue/nuxt特定代码？

我不想使用monorepo，但是我已经共享了一些代码，我希望将这些代码分离到自己的包中。共享代码(新包)是使用@nuxtjs/composition-api编写的，只是在不同组件/模板中反复使用的共享computed和methods。

我不希望这个包被设置为插件。取而代之的是直接导入一些东西来利用树摇动(就像composition-api一样)。

我熟悉用rollupjs来创建可导入的模块。

//New package
//index.js
export { default as isTrue } from './src/isTrue'
...

//src/isTrue
import { computed } from '@nuxtjs/composition-api'

export default (p) => {
  return computed(() => p === 'true') //Im not 100% is this will break reactivity?!?!
}

我通过rollupjs将其编译成.ssr, .esm, .min格式没有任何问题

我遇到的问题是当我将新包导入到工作文件中时。

import { isTrue } from 'new-package'

export default{
name: 'testComp',
setup(props){
  return {
    isActive: isTrue(props.active)
  }
}

将会产生：

[vue-composition-api] must call Vue.use(VueCompositionAPI) before using any function.

我知道@nuxtjs/composition-api是VueCompositionAPI的包装器。

我并不是真的想把新包作为插件安装，所以我省略了新包的安装( install ex：https://github.com/wuruoyun/vue-component-lib-starter/blob/master/src/install.js)

Answer 1

使用options API

//library.js
export default function(){ // access to this -> arrow function doesnt have this
   return this.disabled == true // when applied using the options api this will be the vue context aka property disabled
}

library.js是使用rollupjs编译的，可以导入

//component.vue
import { isDisabled } from 'library'

export default {
  //Composition API:
  setup(props){
   return {
    //stuff
   }
  },
  //Options API:
  computed:{
    isDisabled,
  }
}