[Solved] Histoire + TwicPics components

[did]

👋 Histoire uses a stub NuxtApp instance when rendering a Story. I guess it does this to avoid potential lib conflicts and to keep the rendering as fast as possible. I don't know.

Anyway, the problem with this approach is that some Nuxt libraries / plugins like TwicPics won't be able to expose their own custom components while those generally global components seems to be correctly setup and compiled.
They're just completely unavailable in the Story component and its children.

Here is a hack I found out to make them globally available. I don't care if it's dirty or not as long as it works in Histoire.

First, I've created a plugin named plugins/twicpics-hack.client.ts

declare global {
  interface Window {
    __TWICPICS_COMPONENTS__: Record<'TwicImg' | 'TwicPicture', Component>
  }
}

export default defineNuxtPlugin(nuxtApp => {
  window.__TWICPICS_COMPONENTS__ = {
    TwicImg: nuxtApp.vueApp._context.components.TwicImg,
    TwicPicture: nuxtApp.vueApp._context.components.TwicPicture
  }
})

Then, I created proxy Twicspics components in histoire/components/twicpics like this one for the TwicImg component:

<template>
  <OriginalTwicImg v-bind="$attrs" />
</template>

<script setup lang="ts">
const OriginalTwicImg = window.__TWICPICS_COMPONENTS__.TwicImg
</script>

Make sure you registered your histoire/components folder in nuxt.config.ts:

export default defineNuxtConfig({
....
components: [
    { path: './histoire/components', pathPrefix: false },
    ...,
]
....

NOTE: it might also solve the issue described here #668.