"getActivePinia()" was called but there was no active Pinia.

[davidmoshal]

Describe the bug

Struggling to get vue3 to work in either Cli, IntelliJ or VSCode.
The documentation seems lacking, I needed to install a number of libraries, but even so, support for vue is not great.
Using CLI for example had an error about getActivePinia.
That is typically installed via app.use(pinia) in main.ts.
Unclear how to get the wrapper to install pinia (if indeed it needs to).

Reproduction

I followed your instructions for vue and created a wrapper and a preview.config.js.

<!-- PreviewWrapper.vue -->
<template>
  <div class="wrapped">
    <slot />
  </div>
</template>
<style lang="scss">
@import "./assets/scss/index.scss";
</style>

// preview.config.js
import { defineConfig } from "@previewjs/config";

export default defineConfig({
    wrapper: {
        path: "src/PreviewWrapper.vue",
    },
});

I installed the various npm packages that both the cli and intellij preview panel wanted, and ended up with these:

		"@previewjs/cli": "^1.28.1",
		"@previewjs/config": "^6.0.1",
		"@previewjs/core": "^29.1.1",
		"@previewjs/plugin-vue3": "^15.0.2",
		"@previewjs/pro": "^1.15.3",
		"@previewjs/vfs": "^2.1.3",

And installed previewjs cli globally (didn't work locall)
npm i -g @previewjs/cli

Then ran previewjs from the command line in the project folder.

Preview.js CLI version

v1.28.1

Framework

vue v3.5.11

System Info

System:
    OS: macOS 15.0.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 124.64 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.5.1 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 10.8.2 - /opt/homebrew/bin/npm
  IDEs:
    IntelliJ: 2024.3
    VSCode: 1.95.2 - /usr/local/bin/code
    Vim: 9.0 - /usr/bin/vim
    Xcode: 16.1/16B40 - /usr/bin/xcodebuild
  Browsers:
    Chrome: 130.0.6723.117
    Safari: 18.0.1

Used Package Manager

npm

CLI logs (useful for crashes)

Error: [🍍]: "getActivePinia()" was called but there was no active Pinia. Are you trying to use a store before calling "app.use(pinia)"?
See https://pinia.vuejs.org/core-concepts/outside-component-usage.html for help.
This will fail in production.
    at useStore (http://localhost:8120/node_modules/.previewjs/v29.0.1/vite/deps/pinia.js?v=0ecf02a3:1363:13)
    at setup (http://localhost:8120/src/views/Toolbox/RefreshTool.vue?import&t=1731549210815:10:23)
    at callWithErrorHandling (http://localhost:8120/node_modules/.previewjs/v29.0.1/vite/deps/chunk-SR2TYROL.js?v=0ecf02a3:2547:19)
    at setupStatefulComponent (http://localhost:8120/node_modules/.previewjs/v29.0.1/vite/deps/chunk-SR2TYROL.js?v=0ecf02a3:10277:25)
    at setupComponent (http://localhost:8120/node_modules/.previewjs/v29.0.1/vite/deps/chunk-SR2TYROL.js?v=0ecf02a3:10238:36)
    at mountComponent (http://localhost:8120/node_modules/.previewjs/v29.0.1/vite/deps/chunk-SR2TYROL.js?v=0ecf02a3:7586:7)

Browser logs (useful for rendering errors)

Lot's of errors, sometimes related to missing required props.
(your ui makes it a bit difficult to provide complex props)

Strange errors that don't show up when running the app eg:
- "h() already defined" 
- [Vue warn]: injection "Symbol(router)" not found. 
  at <AuSignUp > 
  at <PreviewWrapper> 
  at <App >

Sometimes imports aren't resolved.
Seems like the vue support is really not good.

Repo link (if available)

No response

Anything else?

No response