storybook: [Bug]: Nuxt 3 version 3.1.2: nuxt instance unavailable - useNuxtApp().$app.filters

Describe the bug

When using use methods from useNuxtApp().$app.filters storybook and vitest gives errors when using

To Reproduce

When using use methods from useNuxtApp().$app.filters storybook and vitest gives errors when using

a-avatar.stories.js

import AAvatar from './a-avatar.vue'

export default {
  title: 'Атомы/a-avatar',
  component: AAvatar,
  parameters: {
    docs: {
      description: {
        component:
          // eslint-disable-next-line max-len
          'Компонент вывода аватара — это настраиваемый компонент, который обычно используется для отображения профиля пользователя в виде изображения, значка или короткого текста',
      },
    },
  },
  argTypes: {
    type: {
      description: 'Тип аватара',
      options: ['film', 'user'],
      control: {
        type: 'radio',
      },
    },
    withInitials: {
      description: 'Включение отображения инициалов',
      table: {
        defaultValue: {
          summary: true,
        },
      },
      control: {
        type: 'boolean',
      },
    },
    name: {
      description: 'Имя',
      control: {
        type: 'text',
      },
    },
    surname: {
      description: 'Фамилия',
      control: {
        type: 'text',
      },
    },
    photoSrc: {
      description: 'Путь до изображения',
      control: {
        type: 'text',
      },
    },
    profession: {
      description: 'Профессия',
      control: {
        type: 'text',
      },
    },
    counter: {
      description: 'Счетчик',
      table: {
        defaultValue: {
          summary: 0,
        },
      },
      control: {
        type: 'number',
      },
    },
  },
}

const Template = (args) => ({
  components: { AAvatar },
  setup() {
    return { args }
  },
  template: '<AAvatar v-bind="args" />',
})

export const Film = Template.bind({})
Film.args = {
  type: 'film',
  name: 'Иван',
  surname: 'Иванов',
  profession: 'тестеровщик',
}

export const FilmWithPhoto = Template.bind({})

a-avatar.vue

<template>
  <div class="a-avatar__wrapper">
    <div v-if="counter && !filmAvatar" class="a-avatar__counter">
      {{ counterText }}
    </div>
    <div
      class="a-avatar"
      :class="[avatarTypeClass, photoSrc && 'a-avatar--photo']"
      :style="{ backgroundImage: photoSrc ? `url('${photoSrc}')` : 'none' }"
    >
      <span v-if="!photoSrc && withInitials" class="a-avatar__initials">
        {{ initials }}
      </span>
      <i v-else-if="avatarWithIcon" class="a-icons icon-user a-avatar__icon" />
    </div>
    <div v-if="filmAvatar" class="a-avatar__info">
      <h6 class="a-avatar__info-name font-body">
        <span>{{ name }}</span>
        <span>{{ surname }}</span>
      </h6>
      <h6 class="a-avatar__info-profession font-body">
        {{ profession.toLowerCase() }}
      </h6>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useNuxtApp } from 'nuxt/app'
import { computed } from 'vue'

const props = defineProps({
  /**
   * Тип аватара: film или user.
   */
  type: {
    type: String,
    default() {
      return avatarVariants.types[0]
    },
    validator(value: string) {
      return useNuxtApp().$app.filters.validatePropStringByArray(value, avatarVariants.types)
    },
  },
  /**
   * Включение отображения инициалов
   */
  withInitials: {
    type: Boolean,
    default: true,
  },
  /**
   * Имя
   */
  name: {
    type: String,
    default: '',
  },
  /**
   * Фамилия
   */
  surname: {
    type: String,
    default: '',
  },
  /**
   * Путь до изображения
   */
  photoSrc: {
    type: [String, Boolean],
    default: false,
  },
  /**
   * Профессия
   */
  profession: {
    type: String,
    default: '',
  },
  /**
   * Счетчик
   */
  counter: {
    type: Number,
    default: 0,
  },
})

const avatarTypeClass = computed(() => {
  return useNuxtApp().$app.filters.setAtomClassByProp(props.type, avatarVariants.types, 'a-avatar')
})

const filmAvatar = computed(() => {
  return props.type === 'film'
})

const avatarWithIcon = computed(() => {
  return props.type === 'user' && !props.photoSrc
})

const counterText = computed(() => {
  return props.counter > 99 ? '+' : props.counter
})

const initials = computed(() => {
  return `${props.name[0]?.toUpperCase()}${props.surname[0]?.toUpperCase()}`
})
</script>

<script lang="ts">
const avatarVariants = {
  types: ['film', 'user'],
}
</script>

<style lang="scss" src="./a-avatar.scss" />

System

Environment Info:

  System:
    OS: macOS 13.1
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 16.17.0 - ~/.nvm/versions/node/v16.17.0/bin/node
    Yarn: 3.2.4 - ~/node_modules/.bin/yarn
    npm: 8.15.0 - ~/.nvm/versions/node/v16.17.0/bin/npm
  Browsers:
    Chrome: 110.0.5481.100
    Firefox: 107.0
    Safari: 16.2
  npmPackages:
    @storybook/addon-a11y: ^6.5.16 => 6.5.16 
    @storybook/addon-essentials: ^6.5.16 => 6.5.16 
    @storybook/builder-vite: ^0.3.0 => 0.3.0 
    @storybook/vue3: ^6.5.16 => 6.5.16

Additional context

nuxt instance unavailable


Error: nuxt instance unavailable
    at useNuxtApp (http://localhost:6006/node_modules/.vite-storybook/deps/nuxt_app.js?v=9a516d33:424:13)
    at validator (http://localhost:6006/components/_ui/atoms/a-avatar/a-avatar.vue?t=1674476744983:16:16)
    at validateProp (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-HK4EIWFA.js?v=9a516d33:4842:21)
    at validateProps (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-HK4EIWFA.js?v=9a516d33:4816:5)
    at initProps (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-HK4EIWFA.js?v=9a516d33:4567:5)
    at setupComponent (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-HK4EIWFA.js?v=9a516d33:7114:3)
    at mountComponent (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-HK4EIWFA.js?v=9a516d33:5901:7)
    at processComponent (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-HK4EIWFA.js?v=9a516d33:5879:9)
    at patch (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-HK4EIWFA.js?v=9a516d33:5597:11)
    at ReactiveEffect.componentUpdateFn [as fn] (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-HK4EIWFA.js?v=9a516d33:5992:11)