Summary
Enabling the @nuxt/hints module causes HLS (HTTP Live Streaming) playback to fail silently in Vidstack video players. The player initializes correctly and can play other video formats (MP4, YouTube, Vimeo), but HLS streams (.m3u8 files) do not load or play.
Environment
- Nuxt Version: 4.2.1
- @nuxt/hints Version: 1.0.0-alpha.1
- Vidstack Version: 1.12.13
- hls.js Version: 1.6.14 (used by Vidstack)
- Vue Version: 3.5.24
- Node Version: v22.21.0
- Package Manager: pnpm
- OS: Linux (WSL Ubuntu)
- Browser: (Chrome)
Steps to Reproduce
-
Enable @nuxt/hints module in nuxt.config.ts:
modules: [
'@nuxt/hints',
// ... other modules
]
-
Configure a Vidstack player with an HLS source (.m3u8 file)
-
Attempt to play the HLS video
-
Observe that the player initializes but HLS playback fails silently
Expected Behavior
HLS videos should play correctly with @nuxt/hints enabled, just like other video formats (MP4, YouTube, Vimeo).
Actual Behavior
- Player initializes successfully
- Other video formats (MP4, YouTube, Vimeo) work correctly
- HLS videos (
.m3u8) fail to load/play silently
- No console errors are displayed
- Player shows loading state but never starts playback
Workaround
Disable the @nuxt/hints module:
modules: [
// '@nuxt/hints', // Disabled - conflicts with HLS playback
// ... other modules
]
Technical Details
Module Order Impact
The position of @nuxt/hints in the modules array does not resolve the issue. Tested positions:
- At the beginning of modules array
- At the end of modules array
- Between other modules
All positions result in the same HLS playback failure.
Configuration
// nuxt.config.ts
export default defineNuxtConfig({
modules: [
'@nuxt/hints', // When enabled, breaks HLS
// ... other modules
],
vue: {
compilerOptions: {
isCustomElement: tag => tag.startsWith('media-'),
},
},
vite: {
plugins: [
vidstack({ include: /components\/blocks\/(Player|Carousel)\.vue/ }),
],
},
})
Player Configuration
<media-player
:src="/videos/example.m3u8"
type="application/x-mpegURL"
>
<media-provider>
<video />
</media-provider>
<media-video-layout />
</media-player>
Additional Context
- The issue is reproducible consistently
- No console errors or warnings appear
- The problem occurs in both development and production builds
- Module order does not affect the outcome
- Disabling
@nuxt/hints immediately resolves the issue
Summary
Enabling the
@nuxt/hintsmodule causes HLS (HTTP Live Streaming) playback to fail silently in Vidstack video players. The player initializes correctly and can play other video formats (MP4, YouTube, Vimeo), but HLS streams (.m3u8files) do not load or play.Environment
Steps to Reproduce
Enable
@nuxt/hintsmodule innuxt.config.ts:Configure a Vidstack player with an HLS source (
.m3u8file)Attempt to play the HLS video
Observe that the player initializes but HLS playback fails silently
Expected Behavior
HLS videos should play correctly with
@nuxt/hintsenabled, just like other video formats (MP4, YouTube, Vimeo).Actual Behavior
.m3u8) fail to load/play silentlyWorkaround
Disable the
@nuxt/hintsmodule:Technical Details
Module Order Impact
The position of
@nuxt/hintsin the modules array does not resolve the issue. Tested positions:All positions result in the same HLS playback failure.
Configuration
Player Configuration
Additional Context
@nuxt/hintsimmediately resolves the issue