histoire: unstyled tailwind not applying pass-through styles in primevue-nuxt

[micheee]

Hi,

I am kind of stuck figuring out how to solve this and I hope here is the right place to file the issue:

I am trying to use histoire to write stories for our app that uses nuxt3 and primevue-nuxt with unstyled tailwind.

It seems as if nuxt-primevue does not apply the pt-styles configured innuxt.config.ts when histoire assembles the components.

I tried to build a SSCE based on: https://github.com/primefaces/primevue-examples/tree/main/nuxt-unstyled-tailwind

It should run right away and I hope my steps to reproduce the issue are documented well enough, they should be copy-pasteable when using bash:

Step 1: clone the example repo

git clone git@github.com:primefaces/primevue-examples.git
cd primevue-examples/nuxt-unstyled-tailwind

Step 2: Install histoire

npm install
npm install -D histoire @histoire/plugin-vue @histoire/plugin-nuxt

Step 3: Create histoire config:

cat << EOF >> histoire.config.js
import { defineConfig } from 'histoire'
import { HstVue } from '@histoire/plugin-vue'
import { HstNuxt } from '@histoire/plugin-nuxt'

export default defineConfig({
  plugins: [
    HstVue(),
    HstNuxt(),
  ],
});

EOF

Step 4: Create story:

cat << EOF >> panel.story.vue
<template>
  <Story>
    <Variant title="default">
      <Panel header="Default Preset">
        <p>
          First panel component uses the global pass through preset from Lara.
        </p>
      </Panel>
    </Variant>
    <Variant title="manual pt">
      <Panel
        header="Default Preset"
        :pt="pt"
      >
        <p>
          First panel component uses the global pass through preset from Lara.
        </p>
      </Panel>
    </Variant>
  </Story>
</template>
<script setup>
import pt from "~/presets/lara/panel";
</script>
EOF

Step 5: Run histoire dev

node_modules/.bin/histoire dev

Now if you open http://localhost:6006 the first Panel will not be styled at all, because it contains the default classes such as class="p-panel p-component" instead of being unstyled / styled with tailwind.

The classes will only be applied once I import them manually and pass them to the :pt-prop. I attached a screenshot, from top to bottom:

• (3) Story without manual :pt
• (2) Story :pt is passed through prop
• (1) nuxt-dev example, nuxt-module applies styles correctly

[micheee]

I am closing this, seems like it's just not plug & playable with histoire :)