[Bug]: Args from URL are not applied when opening a Vue story in isolated mode

[albinlju]

Describe the bug

This applies when choosing Vue 3 + Vite (TS) template with npm create storybook@latest

When selecting a story and opening in "Open in isolation mode" the controls args passed from URL are not applied to the component. Selecting Button and variant Primary changing its size to "large", then open in isolation mode it will still have size medium.

I've tried the same reproduction steps for the React template and that works fine.

Reproduction link

Can be reproduced with latest install of storybook@latest and choosing Vue

Reproduction steps

1. npm create storybook@latest
2. Select Vue 3 + Vite (TS)
3. Select Component development, docs, and testing features.
4. No to install Playwright
5. Open Primary Story of Button
6. Change size to "Large"
7. Open in isolation mode

Now button will still be displayed with size Medium but url will has the correct arg for size.

System

Storybook Environment Info:


  System:
  OS: macOS 26.1
  CPU: (10) arm64 Apple M4
  Shell: 3.2.57 - /bin/bash
  Binaries:
  Node: 22.21.1 - /Users/albin/.nix-profile/bin/node
  npm: 10.9.4 - /Users/albin/.nix-profile/bin/npm <----- active
  Browsers:
  Chrome: 142.0.7444.176
  Firefox: 145.0
  Safari: 26.1
  npmPackages:
  @storybook/addon-a11y: ^10.1.3 => 10.1.3
  @storybook/addon-docs: ^10.1.3 => 10.1.3
  @storybook/addon-vitest: ^10.1.3 => 10.1.3
  @storybook/vue3-vite: ^10.1.3 => 10.1.3
  storybook: ^10.1.3 => 10.1.3

Additional context

[dosubot]

Hi @albinlju! I'm Dosu and I’m helping the storybook team.

This looks like a Vue 3 + Vite integration issue where args from the URL are not being applied to the story component in isolation mode, even though the URL is correct. The core Storybook pipeline parses and applies URL args for all frameworks, and this works for React, but in Vue there may be a disconnect between the core args state and the reactive props in the renderer, especially on initial mount in isolation mode.

A workaround that has helped others with Vue 3 + Vite args/control sync issues is to add a decorator in your preview.ts that injects updateArgs into the story context using useArgs from @storybook/preview-api. This can help ensure args are kept in sync and can be updated reactively. Example:

// .storybook/preview.ts
import { useArgs } from '@storybook/preview-api';

export const decorators = [
  (story, context) => {
    const [_, updateArgs] = useArgs();
    return story({ ...context, updateArgs });
  },
];

Then, in your story's render function or template, you can use updateArgs to update args and reflect changes in controls. This pattern has been confirmed to work in recent Storybook versions for Vue 3 + Vite (discussion).

If you are using custom render templates, make sure all props (args) are correctly defined and returned in the setup function, as missing props can also cause controls and URL args to not update the component as expected (related discussion).

If you try this workaround and still see the issue, please share a minimal reproduction so we can dig deeper.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[albinlju]

@dosu I’ve noticed that in Vue 3 + Vite, loading a story via URL with args=… doesn’t update context.args from the default story args. It’s always the same even if the URL contains args, and this happens outside isolated mode as well.

I have a temporary workaround using a decorator that applies the URL args before the story renders. It introduces a small flicker, but at least the component receives the correct args based on the URL.

Could this behavior be related to the Vue renderer itself?

Workaround:

import type { Decorator } from '@storybook/vue3-vite';
import { useArgs } from 'storybook/preview-api';

let urlArgsApplied = false;

function castArg(value: string, argType?: any) {
  if (!argType || !argType.type) return value;
  const { type } = argType;

  switch (type.name) {
    case 'boolean':
      return value === '!true';
    case 'number':
    case 'range':
      return Number(value);
    case 'array':
    case 'object':
    case 'multi-select':
    case 'check':
    case 'inline-check':
      try {
        return JSON.parse(value);
      } catch {
        return value;
      }
    case 'text':
    case 'color':
    case 'date':
    case 'select':
    case 'radio':
    case 'inline-radio':
    case 'file':
    default:
      return value;
  }
}

export const withArgsFromUrl: Decorator = (storyFn, context) => {
  // Return early if docs
  if (context.viewMode === 'docs') return storyFn(context);

  const [_, updateArgs] = useArgs();

  //Update on first mount
  if (!urlArgsApplied) {
    const url = new URL(window.location.href);
    const argsParams = url.searchParams.get('args');

    if (argsParams) {
      const parsed = Object.fromEntries(
        argsParams
          .split(';')
          .map((p) => p.split(':'))
          .filter(([key]) => key in context.argTypes)
          .map(([key, value]) => [key, castArg(value, context.argTypes?.[key])])
      );

      
      updateArgs(parsed);
      urlArgsApplied = true;
    }
  }

  return storyFn(context);
};

[dosubot]

This is a timing issue in the Vue 3 + Vite renderer. Storybook’s core pipeline is supposed to hydrate context.args with URL args before the story renders, but in Vue, the initial reactive args are set before the URL args are fully applied. That’s why your decorator workaround works, but causes a flicker: it updates the args after the first render, triggering a re-render with the correct values.

This isn’t a limitation of the Vue renderer’s reactivity, but rather when and how the initial args are synced from the URL. The React renderer doesn’t have this problem because it passes the full context (including URL args) as props on the first render, while Vue’s renderer expects the core to provide the correct initial args but doesn’t double-check after mount source.

Your workaround using a decorator with useArgs is the recommended pattern for Vue 3 + Vite, since you can’t call useArgs directly in the story’s setup function discussion. The flicker is unavoidable with this approach because the update happens after the initial render.

If you want to minimize the flicker, you could try delaying the story render until after the decorator applies the URL args, but this would require a more invasive change to the renderer or a custom wrapper that blocks rendering until args are synced. For now, your workaround is the best available option.

Keep an eye on future Storybook releases for improvements in initial args hydration for Vue 3 + Vite. If you find a way to intercept or patch the initial args before the first render, that would be the most robust fix.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}