feat(nuxt): add Nuxt 4 support#831
feat(nuxt): add Nuxt 4 support#831waldemarennsaed wants to merge 2 commits intohistoire-dev:mainfrom
Conversation
Update @histoire/plugin-nuxt to officially support Nuxt 4 by widening the nuxt peer dependency range and @nuxt/kit dependency range to include ^4.0.0. Closes histoire-dev#810
Re-add examples/nuxt3 alongside the existing Nuxt 4 example to ensure dual-version compatibility. Restore the test-nuxt3.yml CI workflow.
|
|
Review or Edit in CodeSandboxOpen the branch in Web Editor • VS Code • Insiders |
❌ Deploy Preview for histoire-examples-svelte3 failed.
|
❌ Deploy Preview for histoire-controls failed.
|
❌ Deploy Preview for histoire-examples-vue3 failed.
|
✅ Deploy Preview for histoire-site ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
histoire
@histoire/app
@histoire/controls
@histoire/plugin-nuxt
@histoire/plugin-percy
@histoire/plugin-screenshot
@histoire/plugin-svelte
@histoire/plugin-vue
@histoire/shared
@histoire/vendors
commit: |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a new Nuxt 3 example project featuring various components, Histoire stories, and Cypress E2E tests. It also updates the @histoire/plugin-nuxt package to support Nuxt 4 by broadening dependency version ranges. Review feedback identifies missing logic and styles for the 'secondary' variant in BaseButtonLink.vue, recommends removing debug logs in AutoImport.story.vue, and suggests refactoring hardcoded styles in BaseButton.vue. A suggestion was also provided to improve the robustness of Cypress tests by avoiding hardcoded story counts.
| const computedClasses = computed(() => ({ | ||
| 'btn-base': true, | ||
| 'btn-primary': props.variant === 'primary', | ||
| })) |
There was a problem hiding this comment.
The variant prop accepts 'secondary', but there is no corresponding logic to apply a class for it in computedClasses. This means the secondary variant will not be styled correctly. You should add handling for the secondary variant and define its styles.
Additionally, you'll need to add the corresponding .btn-secondary styles in the <style> block.
const computedClasses = computed(() => ({
'btn-base': true,
'btn-primary': props.variant === 'primary',
'btn-secondary': props.variant === 'secondary',
}))
| console.log('useNuxtApp', useNuxtApp()) | ||
| console.log('useNuxtApp().$config', useNuxtApp().$config) | ||
| const config = useRuntimeConfig() | ||
| console.log('useRuntimeConfig', config) |
There was a problem hiding this comment.
There are several console.log statements in the script setup. While they can be useful for debugging during development, they should be removed before merging to avoid polluting the browser console for users of this example. It's a good practice to keep the codebase clean of temporary debugging logs.
const config = useRuntimeConfig()
| <template> | ||
| <button | ||
| :disabled="disabled" | ||
| class="btn text-red-500" |
There was a problem hiding this comment.
The text-red-500 class is hardcoded on the button. This might lead to poor color contrast or unintended styling when different button color props (like 'green') are used. It would be more flexible to either remove this class and rely on the default text color, or to make the text color part of the color variant styles.
class="btn"
| it('should display all stories', () => { | ||
| cy.clearLocalStorage() | ||
| cy.visit('/') | ||
| cy.get('[data-test-id="story-list-item"]').should('have.length', 5) |
There was a problem hiding this comment.
This test asserts that there are exactly 5 stories. Using a hardcoded number like this can make the test brittle. If stories are added or removed in this example in the future, this test will fail and will need to be updated. I can see 4 story files being added. If the 5th story is not critical or might be subject to change, consider asserting a minimum number of stories to make the test more robust.
| cy.get('[data-test-id="story-list-item"]').should('have.length', 5) | |
| cy.get('[data-test-id="story-list-item"]').should('have.length.gte', 4) |
|
@Akryum finally checked out the Nuxt 4 thing and I guess we are good to go. Please have a look. PS: Yes, I was using Claude Code to quickly identify what's wrong and CC suggested to add back Nuxt 3 suite for the tests. |
1 participant
Summary
@histoire/plugin-nuxtpeer dependency to acceptnuxt ^4.0.0alongside^3.0.0-rc.11@nuxt/kitand@nuxt/schemadependency ranges to include^4.0.0examples/nuxt3/andtest-nuxt3.ymlCI workflow to ensure dual-version compatibilityCloses #810
Test plan
pnpm installsucceeds without Nuxt peer dependency warningspnpm run buildpassespnpm run lintpasses (0 errors)