Vue: How to use provide/inject?

[ngajhede]

Hiya,

How do I provide data for a component trying to inject the data?

https://vuejs.org/guide/components/provide-inject.html

Thanks,
Nicolaj

[crasite]

I'm also looking for a way to provide value to a single component. But you could still provide a global value to all components using the setup function in .storybook/preview.js

import { setup } from "@storybook/vue3";
import "../src/style.css";

setup((app) => {
  app.provide("key", "provided value");
});

The other way I could think of is to create a custom wrapper that provide value to the child components as in this.

[inkbeard]

@crasite , https://github.com/inkbeard/monorepo/pull/226/files#diff-e9352796dc611a460d5873e8182b52fe226d798401c71e365c9e5facbab18d46 has some code that seems to work with adding provided data, but it comes at the cost of a bunch of other things.

[inkbeard]

Using storybook v8 (I'm guessing this is available in v7 as well, but I didn't check), I was able to provide data via render. So something like this "works", but I called out some issues in inkbeard/monorepo#226. I'm relatively new to storybook so this might not be the best way of doing it. This setup is for a single storybook in a monorepo that handles multiple libraries.

// Component.stories.js
import { provide } from 'vue';
import { ComponentName } from 'path-or-package-name';

export default {
  title: 'ComponentName',
  tags: ['autodocs'],
  args: {
    propName: {
      id: 2,
      label: 'Donkey',
      order: 0,
    },
  },
};

export const SampleComponentName = {
  render: (args) => ({
    components: { ComponentName },
    setup() {
      provide('isDragon', true);

      return { args };
    },
    template: '<ComponentName :prop-name="args.propName" />',
  }),
};

[inkbeard]

I fixed the reactivity issue after digging in some more. I'm updating the example above but here's a few PRs that have provides for components:

• https://github.com/inkbeard/monorepo/pull/233/files
• https://github.com/inkbeard/monorepo/pull/234/files

[Juice10]

I created a decorator for this which allows you to create specific stories with different values injected/provided via a story's args.

Add this to your preview.js file:

const preview = {
  decorators: [
    (story, { args, parameters }) => {
      const valueMap = new Map();
      const newArgs = { ...args };
      parameters.inject?.forEach((attribute) => {
        valueMap.set(attribute, args[attribute]);
        delete newArgs[attribute];
      });

      const WrapperComponent = defineComponent({
        setup() {
          valueMap.forEach((value, key) => {
            provide(
              key,
              computed(() => value),
            );
          });
        },
        template: "<slot />",
      });
      story({ args: newArgs });
      return {
        components: { story, WrapperComponent },
        template: "<WrapperComponent><story /></WrapperComponent>",
      };
    },
  ],
};
export default preview;

In your stories you can add:

const meta = {
  title: "Editor/Home/Home",
  component: Home,
  args: {
    yourInjectedRef: 'and it's value', // provide what you'd like your injected value to be
  },
  parameters: {
    inject: ["yourInjectedRef"], // define what needs to be injected
  },

I'm currently trying to make all of it type safe but thats pretty tricky.

[iamntz]

Altough the decorators thing works, it won't work if you have a pinia store that uses inject.

So in case storybook with pinia and inject doesn't work, you have to move the decorators callback in your setup function, like so:

setup((app, {parameters}) => {
    const pinia = createPinia();
    app.use(pinia);
    app.use(autoAnimatePlugin);
    app.provide('config', parameters?.config); // <<<< this one
});

Then you'll use it as usual:

const meta = {
// .... etc
    parameters: {
        config: {}
    },