Plugins

A plugin runs while the Vue application is created, before rendering. Put it in app/plugins/ when a feature must be installed once per instance.

Create a plugin

// app/plugins/api.ts
export default defineVuePlugin((vueApp) => {
  vueApp.directive("focus", {
    mounted(element) {
      element.focus();
    },
  });

  return {
    provide: {
      apiBase: "/api",
    },
  };
});

Values in provide are registered with app.provide() and as $-prefixed global properties.

Declare order

// app/plugins/tracking.ts
export default defineVuePlugin({
  name: "tracking",
  enforce: "post",
  dependsOn: ["api"],
  setup() {
    // Initialization
  },
});

Runable sorts pre, normal, and post groups separately, then resolves dependsOn. A circular dependency throws an explicit error. A missing dependency produces a warning.

Keep SSR isolated

During SSR, Runable creates one Vue application per render. Create mutable state inside setup():

export default defineVuePlugin(() => {
  const state = reactive({ user: null });
  return { provide: { session: state } };
});

Do not store user state in a mutable module-level variable because requests could share it.