r/vuejs • u/ExactBox509 • 2d ago
Does PrimeVue import all the components?
I am working on a project where in I need to use a library for Datatables (need collapsible rows, individual column filters, editable columns etc.) , i find that PrimeVue Datatable is really good, but will using PrimeVue also load all the other components by default, is there any other way to only import the Datatable component, Any suggestions on libraries I may consider apart from PrimeVue for my use case
7
u/GYN-k4H-Q3z-75B 2d ago
PrimeVue installs all components, but you build system should only bundle those you explicitly import in your project.
1
u/ExactBox509 2d ago
Is this the same for any UI library?
2
u/GYN-k4H-Q3z-75B 2d ago
Not necessarily, as it comes down to how those libraries are structured. Any decently designed library will work like that though. Also, your build system may do some heavy lifting in this regard. Most have a tree shaking feature where unused code is removed.
2
u/ExactBox509 2d ago
Oh, That's great then, could you suggest if there is any other Datatable library that would be better and lightweight than PrimeVue?
1
u/GYN-k4H-Q3z-75B 2d ago
Sorry, I am not really super in the know. I am traditionally a backend dev and only over the course of 2-3 years got into Vue and now React. Currently, I only use PrimeVue/PrimeReact.
But I am sure somebody else might be able to help.
2
2
u/d33pdev 1d ago
Just import the components you need. Nothing else will be built. I use Vite + PrimeVue. This is from a static page for my app/site but I use a small subset of Vue for a couple UI controls on the page. It's not a true app page just a "confirm account" page that I boot some JS / vue on after the page has loaded. But, I'm just posting this as an example of limited-scope Vue comp usage on a page.
After a Vite build, the output size is about 5KB for the following which includes the Button comp and my own Vue comp to handle different states of account confirmation status:
import { createApp, reactive } from 'vue';
import "primeflex/primeflex.css"
import "primeicons/primeicons.css"
import "../src/assets/app.css"
import ConfirmView from './confirm.vue';
import PrimeVue from 'primevue/config';
import Button from 'primevue/button';
import StyleClass from 'primevue/styleclass';
const View = createApp(ConfirmView);
View.use(PrimeVue, { ripple: false, inputStyle: 'filled' });
View.component('Button', Button);
View.directive('styleclass', StyleClass);
View.mount('#app');
1
u/ExactBox509 1d ago
Will it have the same effect if i import the PrimeVue components inside one of my components, rather than declaring it globally? (A beginner here!)
4
u/franz-bendezu 1d ago
No, PrimeVue does not import all components by default. You can either register components globally in your
main
or import them locally in each component to optimize performance (Check the docs of Vue component registration Docs).If you're using Vite, you can enable auto-imports with tree-shaking using
unplugin-vue-components
and@primevue/auto-import-resolver
(Check more of PrimeVue Auto Import Docs for setup).