ankurk91 / vue-loading-overlay

Vue.js component for full screen loading indicator :cyclone:
https://ankurk91.github.io/vue-loading-overlay/
MIT License
1.25k stars 102 forks source link

A plugin must either be a function or an object with an "install" function #113

Closed sevenmay closed 1 year ago

sevenmay commented 1 year ago

I'm submitting a ... (check one with "x")

[x] Bug report => search github for a similar issue or PR before submitting
[ ] Feature request
[ ] Other, please describe

Tell about your platform

Current behavior

Can't install the plugin.

Expected behavior

That the plugin installation works


image

This doesn't work anymore.

const LoadingPlugin = (app, props = {}, slots = {}) => {
  const instance = useLoading(props, slots);
  app.config.globalProperties.$loading = instance;
  app.provide('$loading', instance)
};

See vue docs: https://vuejs.org/guide/reusability/plugins.html#writing-a-plugin

const LoadingPlugin = {
  install(app, options) {
    // ...
  }
};

Thanks!

ankurk91 commented 1 year ago

The documentation says

A plugin is defined as either an object that exposes an install() method, or simply a function that acts as the install function itself. 
ankurk91 commented 1 year ago

I dont see anything broken https://jsfiddle.net/ankurk91/2ou37bc8/

Hope you are importing the plugin like this, version 6 uses named imports

import {LoadingPlugin} from 'vue-loading-overlay';

// create app code goes here

app.use(LoadingPlugin)
sevenmay commented 1 year ago

Hope you are importing the plugin like this, version 6 uses named imports

Yes

import {LoadingPlugin} from 'vue-loading-overlay';

It works with Vue 3.2.35 but not with Vue 3.2.45.

It's very strange. I created a plugin (TestPlugin) like yours without problem, but LoadingPlugin doesn't works.

https://stackblitz.com/edit/vue-ljlzhx?file=src%2Fmain.js

You can see the warning in the console.

const TestPlugin = (app, props = {}, slots = {}) => {};
const data = {};
export { TestPlugin, data };
import { createApp } from 'vue';
import App from './App.vue';

import { VueLoading } from 'vue-loading-overlay';
import { TestPlugin } from './TestPlugin';

const app = createApp(App);

app.use(VueLoading);
app.use(TestPlugin);

app.mount('#app');
ankurk91 commented 1 year ago

Your code indicate that you did not follow documentation