Having issues with projects that use Vue2 and do not use the composition api. Do I need to make it compulsory in my package?

[sduduzog]

Discussed in #78

^{Originally posted by sduduzog July 23, 2021}
Here's my package.json

{
  "name": "vue-supabase",
  "version": "1.0.4",
  "description": "A small wrapper for integrating supabase to Vuejs",
  "main": "index.js",
  "engine": {
    "node": ">= 1"
  },
  "scripts": {
    "test": "npm run test"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/scottrobertson/vue-supabase.git"
  },
  "keywords": [
    "vue",
    "custom",
    "supabase"
  ],
  "author": "Scott Robertson",
  "types": "index.d.ts",
  "license": "MIT",
  "files": [
    "index.js",
    "index.d.ts"
  ],
  "bugs": {
    "url": "https://github.com/scottrobertson/vue-supabase/issues"
  },
  "homepage": "https://github.com/scottrobertson/vue-supabase#readme",
  "dependencies": {
    "@supabase/supabase-js": "^1.4.2",
    "vue-demi": "^0.11.2"
  },
  "peerDependencies": {
    "@vue/composition-api": "^1.0.0-rc.1",
    "vue": "^2.0.0 || >=3.0.0"
  }
}

And here's my index.js

'use strict';
Object.defineProperty(exports, '__esModule', { value: true });

const { inject, isVue3 } = require('vue-demi');

const { createClient } = require('@supabase/supabase-js')

const supabaseKey = 'supabase';

function useSupabase(key = null) { 
  return inject(key !== null ? key : supabaseKey);
}


exports['default'] = {
  supabaseKey,
  useSupabase,
  install: function (app, options) {
    const supabase = createClient(options.supabaseUrl, options.supabaseKey, options.supabaseOptions)

    app.provide(supabaseKey, supabase);

    if (isVue3){
      app.config.globalProperties.$supabase = supabase;
    } else {
      Object.defineProperties(app.prototype, {
        $supabase: {
          get: function() {
            return supabase;
          },
        },
      });
      app.supabase = supabase;
    }
  }
}

module.exports = exports['default'];

This is from a branch of a vue-supabase fork. It works for vite and vue3 but not for Vue2 using @vue/cli to create the project https://github.com/sduduzog/vue-supabase/tree/use-vue-demi

[sduduzog]

I have a feeling the issue I faced is related to this one #76

[sevilyilmaz]

I'm having the same issue and getting this error.

ERROR in ../../node_modules/vue-demi/lib/index.mjs 2:0-84
Module not found: Error: Can't resolve '@vue/composition-api/dist/vue-composition-api.esm.js' in '[PATH_OMITTED]/node_modules/vue-demi/lib'
resolve '@vue/composition-api/dist/vue-composition-api.esm.js' in '[PATH_OMITTED]/node_modules/vue-demi/lib'

This issue seems fixed before with this commit 559eec6 but it appeared again.

vue-demi: 0.11.3

[antfu]

It does not make sense to use vue-demi without composition api.

[sevilyilmaz]

In that case, it shouldn't be optional dependency as it's defined here https://github.com/vueuse/vue-demi/blob/master/package.json#L44 unless that's needed for something else

[antfu]

It's optional because in Vue 3 you don't need that. I think it's clear documented that you need @vue/composition-api to work with Vue 2.

[sduduzog]

@antfu I've gone with specifying in the plugin/s readme that when using Vue 2.x you have to add it, and the nuxt module that depends on it has @vue/composition-api as a devDependency

[LinusBorg]

@antfu My challenge with this is mainly the auto-install of the plugin-

I know how this plugin initially was created to be able to use use composition API in libraries for Vue 2 and Vue 3 at the same time.

My use case is a bit different. Right now, I'm experimenting with setups in which we can write libraries that use components (SFCs) and build them separately for Vue 2 and Vue 3, "patching" some differences like lifecyle hook names at runtime.

For my usecase, vue-demi is very ueful mostly for being able to differentiate between Vue 2 and Vue 3 and getting a universal defineComponent() function. But developers might not want or need composition API in their library, they might just want to write components in Options API and then build them for Vue 2 and 3.

This would be a usecase for Vue-Demi where @vue/composition-api is only needed for defineComponent, but would not have to be installed as a plugin so the rest can be tree-shaken.

[antfu]

Maybe someone could fork and maintain one that does not include @vue/composition-api - for example, vue-demi-lite? To me, vue-demi is designed to be filling the API difference between Vue 2 and Vue 3, in which @vue/composition-api is necessary.

[LinusBorg]

Fair enough, makes sense.

[sduduzog]

Maybe someone could fork and maintain one that does not include @vue/composition-api - for example, vue-demi-lite? To me, vue-demi is designed to be filling the API difference between Vue 2 and Vue 3, in which @vue/composition-api is necessary.

Will definitely consider this.. But I'll wait until it's a painpoint to at least one user of the package