Appearance

Exporting components & plugin styles (advanced) ​

Optional patterns outside the default widget path. Prefer staying inside your plugin boundary; broader “affect the app” examples live in the Cookbook.

Exporting components (exportComponents) ​

Register Vue components in frontend/index.ts for other plugins or the host app:

typescript
export default defineRaclettePluginFrontend({
  exportComponents: {
    MyPanel: () => import("./components/MyPanel.vue"),
  },
})

Treat exported names as a stable public surface (semver). Consumers use the app’s documented import paths, not deep imports into your package tree.

Styles and assets ​

  • Scoped styles in *Widget.vue are the default.
  • Catalog assets in setup.ts: new URL("./icon.svg", import.meta.url).
  • Global CSS from plugins can leak across the app — prefer theme tokens, tw:* utilities used in core widgets, or scoped CSS.

Conventions are still evolving; copy patterns from official plugins or the todo playground before inventing new global styles.

See also ​