Separate calculation functions shared by Vue compilation into separate packages

Question

How to share common vue/nuxtspecific code between different packages?

I don't want to use monorepo, but I have some shared code that I want to separate into its own package. This shared code (new package) is written using @nuxtjs/composition-api and is just a shared computed and that is used over and over in different components/templates ;methods.

I do not want this package to be set up as a plugin. Instead, import directly to take advantage of tree shaking (just like composition-api).

I am familiar with using rollupjs to create importable modules.

//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') //I'm not sure if this will destroy responsiveness? ! ? !
}

I had no problems compiling it to .ssr, .esm, .min formats via rollupjs

The problem occurs when I import a new package into a working file.

import { isTrue } from 'new-package'

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

will produce:

[vue-composition-api] Vue.use(VueCompositionAPI) must be called before using any functions. 

I understand that @nuxtjs/composition-api is a wrapper for VueCompositionAPI.

I don’t want to install the new package as a plugin, so I omit the installation of the new package (installation example: https://github.com/wuruoyun/vue-component-lib-starter/blob/master/src/install .js)

Answer 1

Used options API

//library.js
export default function(){ // 访问 this -> 箭头函数没有 this
   return this.disabled == true // 当使用 options api 时，这将是 vue 上下文，即属性 disabled
}

Use rollupjs to compile library.js and import it

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

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