Vue API Reference

API Index

• createVueAdapter(): creates the Vue mounting adapter
• VuePlugin: manages plugins installed on mounted Vue apps
• VueAdapterError: reports Vue mounting errors
• TypeScript types: public Vue adapter types

createVueAdapter()

Creates a Makoo adapter that mounts Vue components.

Type

function createVueAdapter(): VueMountAdapter;

Returns

Returns a resolvable Makoo mount adapter for Vue components.

Details

The adapter uses createApp(artifact, { makoo }) to create a Vue app, installs every plugin registered with VuePlugin, and mounts the app into the task's mountPoint. It calls app.unmount() when the task is unmounted.

Mounting or unmounting failures throw VueAdapterError.

Example

import { createMakoo, inject } from '@makoojs/core';
import { createVueAdapter } from '@makoojs/vue';
import Panel from './Panel.vue';

const makoo = createMakoo({
	adapters: [createVueAdapter()]
});

makoo.start([
	inject({ injectAt: '#app', artifact: Panel })
]);

VuePlugin

Register Vue plugins before calling start(). Each Vue app mounted afterward installs those plugins.

Type

const VuePlugin: {
	getPlugins(): Plugin[];
	use<T extends Plugin>(plugin: T): void;
	usePlugins(...plugins: Plugin[]): void;
	clear(): void;
};

Methods

Method	Returns	Description
getPlugins()	Plugin[]	Returns a copy of the current plugin list
use(plugin)	void	Registers one plugin; the same plugin instance is stored once
usePlugins(...plugins)	void	Registers multiple plugins
clear()	void	Removes every plugin

Example

import { createPinia } from 'pinia';
import { VuePlugin } from '@makoojs/vue';

VuePlugin.use(createPinia());

VueAdapterError

Error class used when the Vue adapter cannot mount or unmount a component. It extends AdapterError.

Type

class VueAdapterError extends AdapterError {
	constructor(
		message: string,
		issues?: MakooIssue[],
		code?: string,
		cause?: Error
	);
}

When code is omitted, it defaults to ErrorCode.ADAPTER_MOUNT_FAIL.

TypeScript types

VueMountAdapter

type VueMountAdapter = ResolvableMountAdapter<
	VueMountArtifact,
	VueMountHandle,
	VueMountInstance
>;

VueMountProps

Props received by the Vue root component.

type VueMountProps = {
	makoo: MakooContext;
};

VueMountArtifact

type VueMountArtifact = Component;

VueMountHandle

type VueMountHandle = App<Element>;

VueMountInstance

type VueMountInstance = ComponentPublicInstance;

See Component Injection for a component example and the makoo prop. See MakooContext for the full method reference.