Shared Configuration

A configuration shared by every diagram of a Vue app or a Nuxt project: set the theme and the look once, and every <VisualLinker> and useVisualLinker() starts from it. It is a reactive object that belongs to the app — nothing is global, so several apps on one page do not affect each other — and changing it updates every diagram at once.

Providing it

With the plugin, pass the configuration as an option:

import { createApp } from 'vue'
import { VisualLinkerPlugin, darkTheme } from '@macrulez/visual-linker-vue'

createApp(App)
  .use(VisualLinkerPlugin, { config: { theme: darkTheme, lines: { curve: 'smoothstep' } } })
  .mount('#app')

The plugin also registers <VisualLinker> and the two directives. With the Nuxt module, the visualLinker key of nuxt.config.ts becomes the shared configuration with no code.

Using it

Every diagram merges the shared configuration under its own config, field by field, and its own config wins. A diagram that sets only lines.width still gets the shared theme and every other setting.

<template>
  <VisualLinker :connections="connections" :config="{ lines: { width: 3 } }">…</VisualLinker>
</template>

Switching a theme

useVisualLinkerConfig() returns the shared configuration itself, a reactive object. Assign to it, and every diagram on the page redraws:

import { darkTheme, lightTheme, useVisualLinkerConfig } from '@macrulez/visual-linker-vue'

const shared = useVisualLinkerConfig()

function toggleTheme(dark: boolean) {
  shared.theme = dark ? darkTheme : lightTheme
}

Any field can be changed this way — shared.lines = { ...shared.lines, curve: 'straight' } — and a field is removed with delete shared.theme.

Scoping it to a subtree

provideVisualLinkerConfig(initial?) provides a configuration to the components below the one that calls it. They use it instead of the app-level one; it is not merged with it.

import { provideVisualLinkerConfig, darkTheme } from '@macrulez/visual-linker-vue'

const sidebarConfig = provideVisualLinkerConfig({ theme: darkTheme })

It returns the reactive object, so the subtree can be changed the same way.

Functions

• VisualLinkerPlugin — app.use(plugin, { config? }). Provides the shared configuration to the app and registers the component and the directives.
• useVisualLinkerConfig() — returns the shared configuration in effect. It throws an error that says what is missing when nothing provides one: install the plugin or call provideVisualLinkerConfig().
• provideVisualLinkerConfig(initial?) — provides a new reactive configuration to the subtree and returns it. Call it in setup().
• installVisualLinkerConfig(app, initial?) — the same for a whole app, for integrations that install it themselves, as the Nuxt module does.
• createSharedConfig(initial?) — creates the reactive object without providing it.
• VISUAL_LINKER_CONFIG_KEY — the injection key, for providing one by hand (app.provide(VISUAL_LINKER_CONFIG_KEY, config)).

Components that are not under any provider simply use their own config.