@poveste/plugin-vue 0.19.1 → 0.21.0

package/dist/docgen/slots.js

@@ -0,0 +1,21 @@
+export function readSlotProps(typescript, program, slot) {
+    if (!program) {
+        return [];
+    }
+    const checker = program.getTypeChecker();
+    let type;
+    try {
+        type = slot.getTypeObject();
+    }
+    catch {
+        return [];
+    }
+    return type.getProperties().map((property) => {
+        const description = typescript.displayPartsToString(property.getDocumentationComment(checker));
+        return {
+            name: property.name,
+            type: checker.typeToString(checker.getTypeOfSymbol(property)),
+            ...description ? { description } : {},
+        };
+    });
+}

package/dist/index.node.d.ts

@@ -1,3 +1,5 @@
 import type { Plugin } from 'poveste';
 export declare function HstVue(): Plugin;
 export * from './helpers.js';
+export { povesteTesting } from './testing/vite.js';
+export type { PovesteTestingOptions } from './testing/vite.js';

package/dist/index.node.js

@@ -1,10 +1,13 @@
-import { readFileSync } from 'node:fs';
 import { createRequire } from 'node:module';
-import { join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { CLIENT_DEPENDENCIES } from './client-dependencies.js';
 import generateStoryCommand from './commands/generate-story.server.js';
 import { VUE_SETUP_HOOK_NAMES } from './setup-hooks.js';
 import { listComponentFiles } from './util/list-components.js';
+import { projectVueVersion } from './util/project-vue.js';
 import { VAPOR_INTEROP_ID, vaporInteropModule, withoutVaporPlugin } from './util/vapor.js';
+import { requireVuePlugin } from './util/vue-plugin.js';
+const SCRIPT_COMPONENT = /(?<!\.d)\.[cm]?[jt]sx?$/;
 export function HstVue() {
     return {
         name: '@poveste/plugin-vue',
@@ -22,7 +25,16 @@ export function HstVue() {
         config() {
             return {
                 vite: {
+                    // The chrome's client code imports these, and the scan never reaches them: it
+                    // loads through virtual modules, so a cold `poveste dev` found them only when the
+                    // page asked, re-bundled and reloaded a Nuxt reader's first page (#1477). Named
+                    // through this package, which every Vue, Nuxt and Quasar book lists, because the
+                    // book itself cannot resolve them under pnpm.
+                    optimizeDeps: {
+                        include: CLIENT_DEPENDENCIES.map(name => `@poveste/plugin-vue > ${name}`),
+                    },
                     plugins: [
+                        requireVuePlugin(),
                         withoutVaporPlugin(),
                         (() => {
                             let root = process.cwd();
@@ -52,6 +64,15 @@ export function HstVue() {
                 },
             };
         },
+        // A story file documents nothing: it names the components that do. A script file is
+        // offered too, for a component written with `defineComponent` (#1463); the extractor
+        // answers nothing for one that isn't.
+        docgen: {
+            match: file => (file.endsWith('.vue') || SCRIPT_COMPONENT.test(file)) && !/\.story\.[^/]+$/.test(file) && !file.includes('/node_modules/'),
+            module: fileURLToPath(new URL('./docgen/extractor.js', import.meta.url)),
+            // `vue-component-meta` requires `typescript` from where it is installed, an optional peer npm does not add.
+            typescript: createRequire(import.meta.url).resolve('vue-component-meta'),
+        },
         supportPlugin: {
             id: 'vue3',
             moduleName: '@poveste/plugin-vue',
@@ -72,13 +93,5 @@ export function HstVue() {
         },
     };
 }
-function projectVueVersion(root) {
-    try {
-        const manifest = createRequire(join(root, 'package.json')).resolve('vue/package.json');
-        return JSON.parse(readFileSync(manifest, 'utf8')).version;
-    }
-    catch {
-        return undefined;
-    }
-}
 export * from './helpers.js';
+export { povesteTesting } from './testing/vite.js';

package/dist/testing/index.d.ts

@@ -0,0 +1,28 @@
+import type { Component } from 'vue';
+export interface TestStoriesOptions {
+    /** The outer `describe`'s name. The story file's name by default. */
+    name?: string;
+    /**
+     * How long a variant's setup may take to settle, in milliseconds: an
+     * `initState` or an async `setup()` still pending then fails the test.
+     */
+    timeout?: number;
+}
+type StoryComponent = Component & {
+    __file?: string;
+    doc?: string;
+};
+/**
+ * Turns a story file into one test per variant. Each test renders the variant
+ * the way the preview does, and fails on what the preview would only log: an
+ * error from setup or render, a rejected `initState`, or a `[Vue warn]`.
+ *
+ * ```ts
+ * import { testStories } from '@poveste/plugin-vue/testing'
+ * import BaseButton from './BaseButton.story.vue'
+ *
+ * testStories(BaseButton)
+ * ```
+ */
+export declare function testStories(component: StoryComponent, options?: TestStoriesOptions): void;
+export {};

package/dist/testing/vite.d.ts

@@ -0,0 +1,18 @@
+import type { Plugin } from 'vite';
+export interface PovesteTestingOptions {
+    /** The book's poveste config file. Found from the Vite root by default. */
+    configFile?: string;
+}
+/**
+ * What a story needs in the user's own Vitest to render as `poveste dev` renders
+ * it: the book's setup file and the modules Poveste's client imports, with
+ * Poveste's own packages inlined so Vitest can serve those, and `vue` and the
+ * setup file pre-bundled for browser mode. Nothing else: no alias and no change
+ * to how anything resolves, so the test sees the project's Vite config as the
+ * project wrote it.
+ *
+ * Setup code that a plugin generates for `poveste dev`, such as the Nuxt app
+ * `@poveste/plugin-nuxt` boots, is left to the test environment, which already
+ * provides it: `@nuxt/test-utils`'s `nuxt` environment does in a Nuxt project.
+ */
+export declare function povesteTesting(options?: PovesteTestingOptions): Plugin;

package/dist/testing/vite.js

@@ -0,0 +1,171 @@
+import { existsSync } from 'node:fs';
+import { createRequire } from 'node:module';
+import { dirname, join, relative, resolve, sep } from 'node:path';
+import { clientConfig, VIRTUAL_IDS } from '@poveste/shared';
+import { getDefaultConfig, loadConfigFile, mergeConfig, resolveConfigFile } from 'poveste';
+import { VUE_SETUP_HOOK_NAMES } from '../setup-hooks.js';
+import { projectVueVersion } from '../util/project-vue.js';
+import { VAPOR_INTEROP_ID, vaporInteropModule } from '../util/vapor.js';
+const EMPTY_SETUP_ID = '\0poveste-testing:empty-setup';
+const CONFIG_RESOLVED_ID = `\0${VIRTUAL_IDS.config}`;
+const ENVIRONMENT_ID = 'virtual:$poveste-testing-environment';
+// Vitest hands what it finds in `node_modules` to Node, which can't load the
+// `virtual:` modules these packages import, so in a book that installs them no test
+// ran (#1503). The workspace links them, and Vitest inlines a linked package.
+const POVESTE_PACKAGES = [/\/node_modules\/poveste\//, /\/node_modules\/@poveste\//];
+const EMPTY_SETUP = VUE_SETUP_HOOK_NAMES.map(name => `export const ${name} = undefined`).join('\n');
+// `logEvent` from `poveste/client` reaches `@poveste/app`, which names these. A
+// test never runs the code that reads them, but Vite's dependency scan follows
+// the imports, and one it can't resolve skips pre-bundling and reloads the
+// browser run partway through.
+const INERT = {
+    [VIRTUAL_IDS.markdownFiles]: 'export const markdownFiles = []\n',
+    [VIRTUAL_IDS.componentDocs]: 'export const componentDocs = {}\n',
+    [VIRTUAL_IDS.supportPluginsClient]: 'export const clientSupportPlugins = {}\n',
+};
+// Nuxt boots in `@nuxt/test-utils`' `beforeAll`, after Vitest has collected the
+// tests, and a story's own setup can call a Nuxt composable while it is being
+// collected. So its own `setupNuxt` runs before collection, into the promise that
+// `beforeAll` awaits, and Nuxt boots once and in full. Both names are internal to
+// `@nuxt/test-utils`: if a version renames them, the story tests fail loudly.
+function nuxtEnvironment(setupNuxt) {
+    return `import { tryUseNuxtApp } from '#app/nuxt'
+import { setupNuxt } from ${JSON.stringify(setupNuxt)}
+
+export async function environmentReady() {
+  const win = window
+  if (!win.__NUXT_VITEST_ENVIRONMENT__ || tryUseNuxtApp()) {
+    return
+  }
+  win.__NUXT_VITEST_ENVIRONMENT_PROMISE__ ??= setupNuxt()
+  await win.__NUXT_VITEST_ENVIRONMENT_PROMISE__
+}
+
+export function environmentApp() {
+  return tryUseNuxtApp()?.vueApp
+}
+`;
+}
+const NO_ENVIRONMENT = `export async function environmentReady() {}\nexport function environmentApp() {\n  return undefined\n}\n`;
+// `@nuxt/test-utils`' own boot, by file: its `exports` don't list it.
+function setupNuxtFile(root) {
+    try {
+        const file = join(dirname(createRequire(join(root, 'package.json')).resolve('@nuxt/test-utils/package.json')), 'dist/runtime/shared/nuxt.mjs');
+        return existsSync(file) ? file : undefined;
+    }
+    catch {
+        return undefined;
+    }
+}
+// Root-relative, as `poveste dev` reads it: the docs write `/src/poveste.setup.ts`,
+// which `resolve` takes as absolute, so pre-bundling scanned a file outside the
+// book and the setup file's imports were found late, with a reload (#1507).
+function setupFileOf(config) {
+    const setupFile = config.setupFile;
+    const file = typeof setupFile === 'string' ? setupFile : setupFile && 'browser' in setupFile ? setupFile.browser : undefined;
+    return file?.replace(/^\/+/, '');
+}
+/**
+ * What a story needs in the user's own Vitest to render as `poveste dev` renders
+ * it: the book's setup file and the modules Poveste's client imports, with
+ * Poveste's own packages inlined so Vitest can serve those, and `vue` and the
+ * setup file pre-bundled for browser mode. Nothing else: no alias and no change
+ * to how anything resolves, so the test sees the project's Vite config as the
+ * project wrote it.
+ *
+ * Setup code that a plugin generates for `poveste dev`, such as the Nuxt app
+ * `@poveste/plugin-nuxt` boots, is left to the test environment, which already
+ * provides it: `@nuxt/test-utils`'s `nuxt` environment does in a Nuxt project.
+ */
+export function povesteTesting(options = {}) {
+    let root = process.cwd();
+    let config = {};
+    return {
+        name: 'poveste:testing',
+        async config(user) {
+            root = resolve(user.root ?? process.cwd());
+            const file = options.configFile ? resolve(root, options.configFile) : resolveConfigFile(root);
+            const fromFile = file ? await loadConfigFile(file) : {};
+            // As `poveste dev` reads it: the config file, then the Vite config's key.
+            const fromVite = (user.poveste
+                ?? user.histoire ?? {});
+            config = mergeConfig(fromFile, fromVite);
+            // In browser mode Vite pre-bundles what its scan finds. It never sees `vue`,
+            // which compiled templates and this package's own bundle import, nor the
+            // setup file, which arrives as a virtual module. Each was bundled later,
+            // with a reload partway through the first run, and two copies of Vue
+            // failed it (#1503).
+            const setupFile = setupFileOf(config);
+            const optimizeDeps = {
+                include: ['vue'],
+                ...setupFile ? { entries: [relative(root, resolve(root, setupFile)).split(sep).join('/')] } : {},
+            };
+            // `true` already inlines everything, and an array merged into it would not.
+            if (user.test?.server?.deps?.inline === true) {
+                return { optimizeDeps };
+            }
+            return { optimizeDeps, test: { server: { deps: { inline: POVESTE_PACKAGES } } } };
+        },
+        configResolved(resolved) {
+            root = resolved.root;
+        },
+        async resolveId(id, importer) {
+            if (id === VIRTUAL_IDS.setup) {
+                const file = setupFileOf(config);
+                if (file) {
+                    return this.resolve(resolve(root, file), importer, { skipSelf: true });
+                }
+                return EMPTY_SETUP_ID;
+            }
+            if (id === VIRTUAL_IDS.generatedGlobalSetup) {
+                return EMPTY_SETUP_ID;
+            }
+            if (id === VIRTUAL_IDS.config) {
+                return CONFIG_RESOLVED_ID;
+            }
+            if (id === VAPOR_INTEROP_ID) {
+                return `\0${VAPOR_INTEROP_ID}`;
+            }
+            if (Object.hasOwn(INERT, id)) {
+                return `\0${id}`;
+            }
+            if (id === ENVIRONMENT_ID) {
+                return `\0${ENVIRONMENT_ID}`;
+            }
+            return undefined;
+        },
+        // A story's `<docs>` block, which `poveste dev` renders as markdown. A test
+        // renders the variants, not the docs, so it only has to import.
+        transform(_code, id) {
+            if (id.includes('?vue&type=docs')) {
+                return 'export default () => {}';
+            }
+            return undefined;
+        },
+        async load(id) {
+            if (id === EMPTY_SETUP_ID) {
+                return EMPTY_SETUP;
+            }
+            if (id === CONFIG_RESOLVED_ID) {
+                return `export const config = ${JSON.stringify(clientConfig({ ...getDefaultConfig(), ...config }))}\nexport const logos = {}\n`;
+            }
+            if (id === `\0${VAPOR_INTEROP_ID}`) {
+                return vaporInteropModule(projectVueVersion(root));
+            }
+            if (id.startsWith('\0') && Object.hasOwn(INERT, id.slice(1))) {
+                return INERT[id.slice(1)];
+            }
+            // The app the test environment boots: Nuxt's, under `@nuxt/test-utils`' `nuxt`
+            // environment. `poveste dev` renders a story inside the Nuxt app its plugin
+            // boots, and a test does the same. Told by Nuxt's own `#app` alias and the
+            // test utils being installed, not by `#imports`, which unimport also serves.
+            if (id === `\0${ENVIRONMENT_ID}`) {
+                const setupNuxt = setupNuxtFile(root);
+                return setupNuxt && await this.resolve('#app/nuxt', resolve(root, 'index.html'))
+                    ? nuxtEnvironment(setupNuxt)
+                    : NO_ENVIRONMENT;
+            }
+            return undefined;
+        },
+    };
+}

package/dist/util/project-vue.d.ts

@@ -0,0 +1 @@
+export declare function projectVueVersion(root: string): string | undefined;

package/dist/util/project-vue.js

@@ -0,0 +1,12 @@
+import { readFileSync } from 'node:fs';
+import { createRequire } from 'node:module';
+import { join } from 'node:path';
+export function projectVueVersion(root) {
+    try {
+        const manifest = createRequire(join(root, 'package.json')).resolve('vue/package.json');
+        return JSON.parse(readFileSync(manifest, 'utf8')).version;
+    }
+    catch {
+        return undefined;
+    }
+}

package/dist/util/vue-plugin.d.ts

@@ -0,0 +1,10 @@
+import type { Plugin as VitePlugin } from 'vite';
+/**
+ * What to say when a book's Vite config has no Vue plugin. Without one, Vite
+ * answers the first `.vue` file with "Install @vitejs/plugin-vue", which sends a
+ * Quasar reader to install a package their project does not need: Quasar brings
+ * its own Vue plugin, and `HstQuasar()` is what hands it to Poveste (#1337).
+ */
+export declare function noVuePluginMessage(root: string, exists?: (path: string) => boolean): string;
+/** Reports, once per process, a resolved Vite config with no Vue plugin in it. */
+export declare function requireVuePlugin(): VitePlugin;

package/dist/util/vue-plugin.js

@@ -0,0 +1,28 @@
+import { existsSync } from 'node:fs';
+import { join } from 'node:path';
+const QUASAR_CONFIGS = ['quasar.config.js', 'quasar.config.mjs', 'quasar.config.cjs', 'quasar.config.ts'];
+/**
+ * What to say when a book's Vite config has no Vue plugin. Without one, Vite
+ * answers the first `.vue` file with "Install @vitejs/plugin-vue", which sends a
+ * Quasar reader to install a package their project does not need: Quasar brings
+ * its own Vue plugin, and `HstQuasar()` is what hands it to Poveste (#1337).
+ */
+export function noVuePluginMessage(root, exists = existsSync) {
+    const fix = QUASAR_CONFIGS.some(name => exists(join(root, name)))
+        ? 'This is a Quasar project: add `HstQuasar()` from `@poveste/plugin-quasar` to the config\'s `plugins`, which brings Quasar\'s own Vue plugin.'
+        : 'Add `@vitejs/plugin-vue` to `vite.config`, or in a Nuxt project `HstNuxt()` from `@poveste/plugin-nuxt` to the config\'s `plugins`.';
+    return `[poveste] The Vite config has no Vue plugin, so no \`.vue\` story can be compiled. ${fix}`;
+}
+/** Reports, once per process, a resolved Vite config with no Vue plugin in it. */
+export function requireVuePlugin() {
+    let reported = false;
+    return {
+        name: 'poveste-plugin-vue:require-vue-plugin',
+        configResolved(config) {
+            if (!reported && !config.plugins.some(plugin => plugin.name === 'vite:vue')) {
+                reported = true;
+                console.error(noVuePluginMessage(config.root));
+            }
+        },
+    };
+}

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@poveste/plugin-vue",
   "type": "module",
-  "version": "0.19.1",
-  "description": "Poveste plugin for Vue.js support",
+  "version": "0.21.0",
+  "description": "Poveste plugin for Vue 3: stories as .vue files, controls, and a props, slots and events table read from your components' types",
   "author": {
     "name": "Sorin Gitlan",
     "url": "https://x.com/50rayn"
@@ -41,6 +41,10 @@
       "types": "./dist/client/server.d.ts",
       "default": "./dist/bundled/client/server.js"
     },
+    "./testing": {
+      "types": "./dist/testing/index.d.ts",
+      "default": "./dist/bundled/testing/index.js"
+    },
     "./components": {
       "types": "./components.d.ts"
     },
@@ -66,33 +70,46 @@
     "collect.d.ts",
     "components.d.ts",
     "dist",
-    "src"
+    "src",
+    "testing.d.ts"
   ],
   "engines": {
     "node": ">=22.22.2"
   },
   "peerDependencies": {
-    "poveste": "^0.19.1",
+    "poveste": "^0.21.0",
+    "vitest": "^5.0.0",
     "vue": "^3.5.43"
   },
+  "peerDependenciesMeta": {
+    "vitest": {
+      "optional": true
+    }
+  },
   "dependencies": {
-    "@poveste/controls": "^0.19.1",
-    "@poveste/shared": "^0.19.1",
-    "@poveste/vendors": "^0.19.1",
+    "@poveste/controls": "^0.21.0",
+    "@poveste/shared": "^0.21.0",
+    "@poveste/vendors": "^0.21.0",
     "change-case": "^5.4.4",
     "ignore": "^7.0.10",
-    "launch-editor": "^2.9.1",
+    "launch-editor": "^2.14.2",
     "pathe": "^2.0.3",
-    "tinyglobby": "^0.2.17"
+    "tinyglobby": "^0.2.17",
+    "vue-component-meta": "^3.3.13"
   },
   "devDependencies": {
-    "@types/node": "^26.6.3",
-    "concurrently": "^10.0.5",
-    "poveste": "0.19.1",
+    "@fontsource/fira-mono": "^5.3.0",
+    "@tailwindcss/oxide": "^4.3.3",
+    "@types/node": "^26.6.5",
+    "@vitejs/plugin-vue": "^6.0.10",
+    "@vitest/browser-playwright": "5.0.5",
+    "concurrently": "^10.0.6",
+    "jsdom": "^30.1.3",
+    "poveste": "0.21.0",
     "typescript": "6.0.3",
-    "vite": "^8.3.1",
-    "vitest": "^5.0.2",
-    "vue": "^3.5.43",
+    "vite": "^8.3.4",
+    "vitest": "^5.0.5",
+    "vue": "^3.5.44",
     "vue-vapor-rc": "npm:vue@3.6.0-rc.10"
   },
   "scripts": {
@@ -100,6 +117,7 @@
     "build:types": "tsc --declaration --emitDeclarationOnly",
     "watch": "concurrently \"vite build --watch\" \"tsc -d -P tsconfig.build.json --watch\" \"pnpm run build:types --watch\"",
     "test": "vitest run",
+    "test:story-tests": "vitest run --config vitest.story-tests.config.ts",
     "test:dev": "vitest"
   }
 }

package/src/client/app/MountStory.ts

@@ -12,6 +12,7 @@ import {
 } from '@poveste/vendors/vue'
 import { reactive } from 'vue'
 import { createPreviewHost } from './host.js'
+import { warnIfForeignVue } from './util.js'
 
 export default _defineComponent({
   name: 'MountStory',
@@ -34,6 +35,7 @@ export default _defineComponent({
   },
 
   setup(props) {
+    warnIfForeignVue('MountStory')
     const el = _ref<HTMLDivElement>()
     const renderContext = reactive({
       mode: 'mount' as const,

package/src/client/app/RenderStory.ts

@@ -12,7 +12,7 @@ import {
 } from '@poveste/vendors/vue'
 import { reactive } from 'vue'
 import { createPreviewHost } from './host.js'
-import { syncStateBundledAndExternal } from './util.js'
+import { syncStateBundledAndExternal, warnIfForeignVue } from './util.js'
 
 export default _defineComponent({
   name: 'RenderStory',
@@ -39,6 +39,7 @@ export default _defineComponent({
   },
 
   setup(props, { emit }) {
+    warnIfForeignVue('RenderStory')
     const sandbox = _ref<HTMLDivElement>()
     let host: ReturnType<typeof createPreviewHost> | null = null
     let mounting = false

package/src/client/app/Story.ts

@@ -1,11 +1,11 @@
 import type { Story } from '@poveste/shared'
-import type { PropType, VNode } from 'vue'
+import type { Component, PropType, VNode } from 'vue'
 import type { PreviewRenderContext } from './render-context.js'
 import { omitInheritStoryProps } from '@poveste/shared'
 import { cloneVNode, computed, defineComponent, h, isRef, reactive, useAttrs } from 'vue'
 import { implicitStateContext, storyContext } from './context.js'
 import { useRenderContext } from './render-context.js'
-import { isWritableBinding, useInstance } from './util.js'
+import { holdsVueApp, isComponentBinding, isWritableBinding, useInstance } from './util.js'
 import Variant from './Variant.js'
 
 export default defineComponent({
@@ -25,6 +25,18 @@ export default defineComponent({
       type: Object as PropType<Story['meta']>,
       default: undefined,
     },
+
+    // Read at collection; declared so it is not passed on to the variants (#1398).
+    autoDocs: {
+      type: [Boolean, Array] as PropType<Story['autoDocs']>,
+      default: undefined,
+    },
+
+    // The components the Docs tab documents, read from the source by auto-docs (#1432).
+    component: {
+      type: [Object, Function, Array] as PropType<Component | Component[]>,
+      default: undefined,
+    },
   },
 
   setup(props) {
@@ -53,7 +65,7 @@ export default defineComponent({
     function addImplicitState(source: Record<string, any>, key: string) {
       const value = source[key]
 
-      if (typeof value === 'function' || (value?.__file) || typeof value?.render === 'function' || typeof value?.setup === 'function') {
+      if (isComponentBinding(value) || holdsVueApp(value)) {
         return
       }
 

package/src/client/app/global-components.ts

@@ -28,6 +28,10 @@ export function registerGlobalComponents(app: App) {
 
   app.component('Variant', Variant)
 
+  registerControlComponents(app)
+}
+
+export function registerControlComponents(app: App) {
   for (const [key, component] of Object.entries(components)) {
     app.component(key, wrapControlComponent(component))
   }

package/src/client/app/host.ts

@@ -27,6 +27,13 @@ interface PreviewHostOptions {
   getVariant: () => Variant | null
   renderContext: PreviewRenderContext
   wrapInDiv?: boolean
+  /** A story test's: what the app would only log, it fails on. */
+  onError?: (err: unknown) => void
+  onWarn?: (message: string, trace: string) => void
+  /** A story test's: when the render's async setups have settled. */
+  onResolve?: () => void
+  /** A story test's, run after the app's own registrations and setup hooks. */
+  configureApp?: (app: App) => void
 }
 
 const PreviewHostRoot = defineComponent({
@@ -86,7 +93,7 @@ export function createPreviewHost(options: PreviewHostOptions) {
           vnode = h('div', vnode)
         }
 
-        return h(Suspense, {}, vnode)
+        return h(Suspense, options.onResolve ? { onResolve: options.onResolve } : {}, vnode)
       },
     })
 
@@ -98,7 +105,17 @@ export function createPreviewHost(options: PreviewHostOptions) {
         storyId: options.getStory()?.id,
         variantId: options.getVariant()?.id,
       })
-      console.error(err)
+      if (options.onError) {
+        options.onError(err)
+      }
+      else {
+        console.error(err)
+      }
+    }
+
+    if (options.onWarn) {
+      const onWarn = options.onWarn
+      app.config.warnHandler = (message, _instance, trace) => onWarn(message, trace)
     }
 
     // From Vue 3.6, a Vapor component inside a VDOM tree mounts only through this
@@ -123,6 +140,8 @@ export function createPreviewHost(options: PreviewHostOptions) {
 
     await runSetupHooks(setupApi)
 
+    options.configureApp?.(app)
+
     app.mount(target)
   }