Bug reportAug 26, 2026· 0:41· 10 views
Vuetify 4.1.10: v-pagination with length=3 in a flex container flickers continuously (no interaction)
0:41 total
Comments · 0
Be the first to comment.
Bug report— by SceneRecap AI
mediumcomponents/v-pagination
os: macOSbrowser: Chromium 151.0.7922.34viewport: 1280x720
Repro steps
- 1.Open Vuetify Play with a component containing a v-pagination component inside a flex container ('d-flex').
- 2.Set v-pagination props: length='3', size='50', rounded='circle', and v-model bound to page ref(1).
- 3.Observe the rendered pagination component in the PREVIEW pane.
Expected
v-pagination with length=3 should display all page numbers (1, 2, 3) without displaying an unnecessary ellipsis ('...').
Actual
v-pagination displays '1 ... 3' replacing the middle page with an ellipsis despite only having 3 total pages.
Evidence
visualPREVIEW panel renders pagination items as '< 1 ... 3 >' for a total length of 3 pages.
consoleConsole reports potential listener leak warnings originating from Monaco editor during playground session.
Issue markdown (copy-paste ready)
### Summary When rendering `v-pagination` with `:length="3"` inside a flex container (`d-flex`) and custom size attributes, the pagination control truncates the page list and shows `1 ... 3` with an ellipsis instead of rendering page 2. ### Steps to Reproduce 1. Open Vuetify Play (t=0.0s). 2. Configure `v-pagination` with `:length="3"`, `size="50"`, `rounded="circle"`, and `v-model="page"` (initial value `1`) inside `<div class="d-flex">` (t=0.0s). 3. View the rendered preview (t=3.0s). ### Expected Result All three page buttons (`1`, `2`, `3`) should be rendered clearly without an ellipsis. ### Actual Result The pagination component renders `< 1 ... 3 >`. *Recorded with SceneRecap.*
Your recordings could explain themselves too.
Free plan · silent recordings welcome · bug reports included.
Try SceneRecap free →