Skip to content

Instantly share code, notes, and snippets.

@scvnc
Created April 17, 2023 21:44
Show Gist options
  • Save scvnc/5ca1771cbcb199b0aa58b2a7094ecc62 to your computer and use it in GitHub Desktop.
Save scvnc/5ca1771cbcb199b0aa58b2a7094ecc62 to your computer and use it in GitHub Desktop.
How to register plugins on a vue CE. You likely will have have to modify accordingly to make compatible for other plugins.
import * as Vue from 'vue';
import { getCurrentInstance, type Plugin } from 'vue';
import { createEventHook, EventHook } from '@vueuse/core';
interface CeVueApp {
version: string;
readonly config: Vue.AppConfig;
provide(clientKey: string | symbol, value: unknown): CeVueApp;
onUnmount(fn: EventHook['on']): void;
use(plugin: Plugin, ...options: unknown[]): CeVueApp;
}
/**
* This will allow you to register certain vue plugins with your Vue CE
*
* **Only tested with VueQuery and PrimeVue**
*
* This should only be called at the root of the CE App. E.g. YourCeApp.ce.vue
*/
export const useCeVueApp = (configFn: (app: CeVueApp) => void): void => {
const _vInstance = getCurrentInstance();
const _unmountEventHook = createEventHook();
Vue.onBeforeUnmount(() => _unmountEventHook.trigger(void 0));
if (!_vInstance) {
throw new Error('useCeVueApp(): could not find vue instance!');
}
const fakeVueApp = {
version: 'FAKE_APP_FOR_CE',
get config() {
return _vInstance.appContext.config;
},
provide(clientKey: string | symbol, value: unknown) {
Vue.provide(clientKey, value);
return fakeVueApp;
},
onUnmount(fn: EventHook['on']) {
_unmountEventHook.on(fn);
},
use(plugin: Plugin, ...options: unknown[]) {
// CeApp is only a subset implementation of a vue app.. but we need to pretend.
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const _app: Vue.App = fakeVueApp as any;
if (plugin.install) {
plugin.install(_app, ...options);
}
if (typeof plugin === 'function') {
plugin(_app, ...options);
}
return fakeVueApp;
}
};
configFn(fakeVueApp);
};
<script setup lang="ts">
import { useCeVueApp } from './useCeVueApp';
import PrimeVue from 'primevue/config'
useCeVueApp(app => {
app.use(PrimeVue);
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment