Pinia breaks in sandboxed iframe without localStorage due to devtools-kit import

[luizzappa]

Reproduction

Steps to reproduce the bug

Environment

• Vue: 3.5.16
• Pinia: 3.0.3
• Context: Application is running inside an iframe with sandbox attribute (without allow-same-origin)
• Result: localStorage is inaccessible — any access throws SecurityError

Problem

Even with all devtools disabled (e.g. __VUE_PROD_DEVTOOLS__, app.config.devtools = false), Pinia still imports and initializes @vue/devtools-kit.

When the bundle is loaded, the following error is thrown:

Uncaught SecurityError: Failed to read the 'localStorage' property from 'Window': The document is sandboxed and lacks the 'allow-same-origin' flag.
Stack trace:

at getTimelineLayersStateFromStorage
at @vue/devtools-kit/dist/index.js
at pinia.mjs

Is there a way to configure Pinia to not import or initialize devtools-kit at all, for environments like sandboxed iframes?

If not, would you consider deferring this logic until after runtime checks are passed, or allowing a config flag to disable the devtools integration entirely?

Expected behavior

Works with sandboxed iframe

Actual behavior

Does not work with sandboxed iframe

Additional information

No response

[luizzappa]

Even when setting the __USE_DEVTOOLS__ variable to false, the module @vue/devtools-api is imported before that condition is checked.

This alone causes issues in environments like sandboxed iframes (without allow-same-origin), because @vue/devtools-api tries to access localStorage immediately on import, which throws a SecurityError.

✅ My workaround

In webpack.config.js, I added an alias to completely block the import of @vue/devtools-api:

resolve: {
    extensions: [".tsx", ".ts", ".jsx", ".js", ".css", ".wasm"],
    alias: {
        '@': path.resolve(__dirname, 'src'),
        'vue': '@vue/runtime-dom',
        '@vue/devtools-api': false // 👈 this is the key
    },
},

And in the plugins:

plugins: [
    new webpack.DefinePlugin({
        __VUE_PROD_DEVTOOLS__: 'false',
        __USE_DEVTOOLS__: 'false'
    }),
]

@posva, please consider wrapping the import of @vue/devtools-api in a conditional, so that when __USE_DEVTOOLS__ is false, the code path is never evaluated.