I have a simple reproduction case at

To create this, I did the following...

(1) I created the default vue Project

$ npm create vue@latest                                                                                                                                                                                                                                     10:25:02

> npx
> create-vue


Vue.js - The Progressive JavaScript Framework

✔ Project name: … devtools_test
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? › No

Scaffolding project in /Users/eric.g/depot/vue/devtools_test...

Done. Now run:

  cd devtools_test
  npm install
  npm run dev

I answered "yes" to TypeScript, Vue Router, and Pinia.

(2) I initialized the project with npm install.

(3) I ran npx storybook@latest init

(4) I then setup storybook to be able to use Pinia. Based on , I added

import { setup, type Preview } from '@storybook/vue3';
import { createPinia } from 'pinia';
 
setup((app) => {
    app.use(createPinia());
});

to .storybook/preview.js.

(5) I then run npm run storybook and the following error appears in the console when I click around using the stories for button, header, or page.

index.js?v=eab36b85:2603 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'app')
    at Object.get (index.js?v=eab36b85:2603:57)
    at index.js?v=eab36b85:4507:13
    at index.mjs?v=eab36b85:48:66
    at index.mjs?v=eab36b85:48:56

Clearly I have not configured something correctly.

What did I miss?