414 questions
0
votes
0
answers
41
views
PrimeVue DataTable not responsive?
I have the follwing:
<Panel header="SITE MANAGEMENT">
<template #icons>
<Button severity="secondary" rounded text @click="showAddNewModal = true"&...
- 1,740
2
votes
0
answers
83
views
Problem with frozen columns in Datatable component from PrimeVue library (gaps, shifting)
I have encountered a problem with the DataTable component from the Primevue library.
When I assign pagination to a table and set several frozen columns, if I switch the number of rows displayed in the ...
- 1,658
0
votes
0
answers
41
views
PrimeVue DataTable MultiSelect Filter Shows Incorrect Selected Count When Pre-selecting Values
I'm using PrimeVue DataTable with a MultiSelect filter on the "Project Status" column. I want to pre-select certain status values by default, but only those that actually exist in my data.
...
- 1
0
votes
0
answers
66
views
Where do "implicit outer layer" and "components" CSS layers come from?
In Chrome developer tools, there's a "CSS layers" toggle which shows:
I'm trying to understand where these layers ("properties", "theme", etc) come from. Are they Chrome-...
- 130k
0
votes
0
answers
314
views
Validation problem with Zod Resolver using PrimeVue forms
I'm having somewhat of an issue using Zod form resolver.
Using PrimeVue forms, I have validate-on-value-update activated:
<Form
v-slot="$form"
:initial-values="form.data()"...
0
votes
0
answers
31
views
Can we make a vertical InputGroup in PrimeVue?
PrimeVue offers a convenient way to work with an InputGroup, like:
<InputGroup>
<InputGroupAddon>
<i class="pi pi-user"></i>
</InputGroupAddon>
...
- 482k
0
votes
1
answer
121
views
How to set the primary colour of a theme in Primevue template before/on app load
I am using Primevue's Sakai template https://github.com/primefaces/sakai-vue and would like to set what the primary colour of the Aura theme should be before the app is loaded, for example using a ...
- 425
0
votes
1
answer
215
views
In a PrimeVue DataTable with rowGroupMode set to rowspan, is it possible to groupRowsBy multiple 'columns'?
Is it possible at all to set up a DataTable in PrimeVue where rowGroupMode is set to rowspan and groupRowsBy is done on multiple columns? For example:
Time and User always span the same number of ...
- 425
0
votes
1
answer
331
views
How to modify the matching mode of the filters in a PrimeVue TreeTable?
I am using the TreeTable component of the PrimeVue library.
In the example from the documentation (https://primevue.org/treetable/#filter ) the filters are initialized with:
const filters = ref({});
...
- 1,535
0
votes
1
answer
319
views
Styling problem with Primevue with dialog component
Im trying to implement a simple dialog, but the styles dont apply like it would do
This is the component
<template>
<div class="card flex justify-center">
<...
- 11
1
vote
1
answer
52
views
How to listen to the scroll event of the VirtualScroller inside MultiSelect in PrimeVue 3 via PT?
What I'm trying to achieve is to listen to the scroll event of the VirtualScroller inside a MultiSelect, so that every time the user scrolls the dropdown panel, I can trigger a custom function.
I saw ...
- 13
0
votes
0
answers
49
views
Inerta returning 302 followed by a 302 without errors
I'm using Laravel 11 with Inertia and VueJS 3. I installed Breeze on the project and tested authentication. Everything was working fine until I tested whether the invalid credentials error was ...
0
votes
0
answers
410
views
Primevue 4.3.x does not work with primeuix/themes and primeflex together
I've been trying to upgrade for a few days now. I have re-read all tickets and forums, but I get the feeling that it's not me doing something wrong, it's just some bug or this design just breaks when ...
- 2,621
0
votes
0
answers
134
views
Issue using Primevue Dynamic Dialog inside Nuxt 3 application
I'm trying to use PrimeVue DynamicDialog (https://primevue.org/dynamicdialog) inside my Nuxt 3 application. So I built a simple test page with a button that when clicked has to show a popup with a ...
- 594
0
votes
0
answers
86
views
nuxt vue3 primevue autocomplete issue
In a vue component I have a autocomplete dropdown:
import AutoComplete from 'primevue/autocomplete';
defined in the template as follows:
<AutoComplete
id="account"
v-model="...
- 321
0
votes
0
answers
108
views
Using Vue3 and Primevue 4 in a library with CSS variables
Could you help me with such question, please?
In my library I have
primevue.ts
import type { App } from "vue";
import PrimeVue from "primevue/config";
import Button from "...
- 1
0
votes
0
answers
33
views
How can I dynamically scale and fit two ScrollPanels to the screen size on the same page
I have two ScrollPanels side by side, but the width and height numbers don’t make sense to me. Also I can’t get the height to reach the bottom of the page depending on monitor size and system scale (...
- 3
0
votes
0
answers
70
views
Why aren't styles loading in PrimeVue?
I don't understand what the problem is.
I installed primevue 4.3.3 and @primeuix
In main.ts I connect it like this
import PrimeVue from "primevue/config";
import Aura from "@primeuix/...
- 9
1
vote
1
answer
137
views
PrimeVue how to listen to emits?
I have this piece of code with the Galleria component of PrimeVue.
<PrimeGalleria @update:visible="onVisible()" :value="images" v-model:visible="isZoomed" :...
- 135
0
votes
1
answer
309
views
How to fix manual input for datepicker
I am trying to use the primevue datepicker in a form submission form. I am using zod as schema validation.
The problem is, I cannot enter the date by hand. When I do this, a date already appears and ...
- 1
0
votes
1
answer
120
views
How to display static pdf url with vue-pdf-embed library on production
I have a Dialog in my vue project to display a PDF file. This is how the parent component handles the PDF file.
async function openDialog(index: number) {
isLoading.value = true;
const ...
0
votes
1
answer
114
views
CSS hover effects moves input field below
I finally got the PrimeVue hover effects working. I had to add a bit of CSS work to it, since the Designtokens did not all the work.
But now the hover effect of the first input field causes the input ...
- 1
0
votes
2
answers
122
views
VuePrime datepicker does not change css attributes
I am using the PrimeVue UI component libary. I am trying to change the font size and color of the datepicker but it just won't work.
This is my template:
<div style="flex: 1;">
...
- 1
0
votes
0
answers
19
views
DataTable with ContextMenu not handling muli-selected rows
I have working DataTable that works well with ContextMenu when DataTable is in single row select mode. When selectionMode="multiple", however, a right click on one of the selected rows ...
- 358
0
votes
1
answer
143
views
Different Form validation behaviour between PrimeVue versions 4.2.5 and 4.3.2
We have moved back to PrimeVue version 4.2.5 as the Form validation in 4.3.2 (and in 4.3.1) does not behave nicely in our forms. The difference can be demonstrated with this demo on Stackblitz
The ...
- 10.6k
0
votes
1
answer
415
views
How to make PrimeVue InputNumber component use period character as decimal separator instead of comma?
Is there a away to make PrimeVue InputNumber component use period character as decimal separator instead of comma?
- 1,658
1
vote
1
answer
763
views
PrimeVue Theme Styles
I am using PrimeVue with TailwindCSS and have defined a custom theme preset using definePreset from @primevue/themes. However, my custom background color for the primary button is not being applied ...
- 4,276
1
vote
5
answers
240
views
How to disable changing the value of <InputNumber> component using up, down, etc. arrows?
Is there a way to disable the InputNumber component value from changing when pressing Up Arrow, Down Arrow, Home, End keys?
I tried this but it doesn't help:
const onKeyDown = e => {
if (e.key =...
- 1,658
0
votes
0
answers
394
views
PrimeVue Form - Can't access $form.values?
Using PrimeVue Form, and am running into issues with v-model:
<Form v-slot="$form" :initialValues :resolver @submit="saveShift">
<div>{{ console.log('Slot ...
- 1,740
0
votes
1
answer
278
views
How can I override the value of a CSS variable for an element?
Currently using PrimeVue, but the button looks too big y-padding for as shown
Left button is PrimeVue button, right button is what I want.
Look into the button CSS, I found this it has to do with ...
- 8,170
0
votes
1
answer
62
views
Message is added but isn't displayed
The toastmessages from PrimeVue ToastEventBus are added to the DOM but not displayed. Does anyone know why?
Based on this answer I have the following in page.
<!doctype html>
<html lang="...
- 3
1
vote
1
answer
524
views
TailwindCSS styling is not applied
I have the following project.
vite.config.js
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-...
- 3,578
0
votes
1
answer
1k
views
PrimeVue - How to use reset emit to clear form?
I've been experimenting with PrimeVue and am trying to understand how to use their forms. They don't have any example of clearing the form fields. However, there is mention of a "reset" ...
- 1
0
votes
1
answer
556
views
Nested Object Yup and Form Primevue
I tried to create a simple validation in vue js using primevue and yup:
<script setup>
import { Form, FormField } from '@primevue/forms';
import { useToast } from 'primevue/usetoast';
import { ...
- 11
2
votes
2
answers
2k
views
Changing style of DataTable in PrimeVue v4
I am trying to change the column header color in the PrimeVue v4 DataTable, but none of the methods I've tried worked. I might be able to do this by changing the CSS classes globally. If so, what is ...
- 75
0
votes
1
answer
497
views
How to validate input when value is set programmatically in form validation?
My form has a name input and an alias input. They are in a Primevue Form inside a FormField and both have a resolver that checks for required input.
When a name is entered in the name field the value ...
- 10.6k
0
votes
0
answers
589
views
PrimeVue 4 VirtualScroller Lazy Loading - Issue with API Calls
I'm trying to implement a virtual scroller (initially I wanted a Select component with virtual scrolling lazy but I simplified it to try to make it works) to display a list of project (id, name, ...
- 314
0
votes
0
answers
292
views
Trouble with Page Width using PrimeVue Tabs
I'm using PrimeVue tabs. When I use too many tabs in the TabList, it extends beyond the screen and it seems like the 'scrollable' property isn't working as intended.
It only works if I set a specific ...
1
vote
1
answer
2k
views
How to customize a PrimeVue component design tokens?
I'm learning PrimeVue 4 and I can't figure out how to customize its components' design tokens.
For example, this page https://primevue.org/iftalabel (under the "themes" tab) has a list of ...
- 1,658
0
votes
0
answers
362
views
PrimeVue v-tooltip - Need help understanding error
I'm testing out PrimeVue. Created a simple timestamp template that is being imported and displayed in the main App.vue template. See the following code. timestamp and local_timestamp show up correctly ...
- 1
2
votes
3
answers
2k
views
PrimeVue toast - No PrimeVue Toast provided when using utility .ts
I have a vue.js app where I'm using PrimeVue for the UI. I want to have util functions for displaying toasts, but it doesn't seem to work.
I have everything set up, but I'm getting the error 'No ...
- 719
0
votes
1
answer
130
views
Is there a way to pass slots and emits as fallthrough attributes in vue?
With react i was able to do smth like this:
const Component = (props: BaseComponentProps) => <BaseComponent {...props} className={`my-class ${props.className}`} />
a simple way to modify ...
- 75
1
vote
0
answers
242
views
Can I reference form state from outside form using PrimeVue Forms
I'm trying to use PrimeVue Forms and I have validation working using Valibot (though I think this question is agnostic of what validation framework I'm using).
In my template, I have the following:
...
- 11
1
vote
0
answers
708
views
PrimeVue DataTable Lazy Loading not working with API calls
I'm implementing lazy loading with virtual scrolling in a PrimeVue DataTable. The data should be dynamically fetched from an API as the user scrolls. While the initial data fetch (first 25 accounts) ...
0
votes
1
answer
551
views
PrimeVue DataTable - Get array results after filter is applied
I am using Vue via via CDN to add progressive reactivity to a few pages in an existing website. I have found the PrimeView DataTable which seems very capable and offers comprehensive filter ...
- 9,623
1
vote
0
answers
455
views
How to Fix "No PrimeVue Toast Provided" Error in Nuxt 3 with PrimeVue
I'm trying to use the Toast component from PrimeVue in my Nuxt 3 application but keep encountering the error:
No PrimeVue Toast provided.
I’ve configured my nuxt.config.ts to include the @primevue/...
0
votes
1
answer
210
views
How to styling AutoComplete component in Primevue
i need to how to styling AutoComplete component in PrimeVue
this is the current code sample <AutoComplete size="small" v-model="selectedEmployee" class="" placeholder=...
0
votes
0
answers
652
views
PrimeVue Forms API: TypeScript Error When Accessing $form Field States
I'm using the PrimeVue Forms API with TypeScript, but I encounter TypeScript errors when trying to access form field states via the $form object. This occurs even when following the documentation ...
- 4,276
0
votes
1
answer
114
views
Custom PrimeVue CSS
I'm using Vue3 and for theming I'm using Primevue which I find very pleasing but I came across a problem and I didn't find a way yet to solve it.
I have an accordion and I'm simply trying to put the ...
0
votes
1
answer
126
views
When using PrimeVue with TailwindCSS, some components show up as raw HTML and are not styled
I've been trying to get PrimeVue set up with my TailwindCSS project for a while. However, I keep running into this issue where, when I add a component, there is 0 styling on it. and it looks like ...
- 11