diff --git a/package.json b/package.json
index 2bc3d6ce9..096d31a3c 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,8 @@
     "primeicons": "4.0.0",
     "prismjs": "^1.15.0",
     "quill": "^1.3.7",
+    "rollup-plugin-postcss": "^4.0.0",
+    "rollup-plugin-vue": "^6.0.0-beta.9",
     "sass-loader": "^8.0.2",
     "vue": "3.0.3",
     "vue-router": "^4.0.0-0",
diff --git a/rollup.config.js b/rollup.config.js
new file mode 100644
index 000000000..dd38df094
--- /dev/null
+++ b/rollup.config.js
@@ -0,0 +1,38 @@
+import vue from 'rollup-plugin-vue';
+import postcss from 'rollup-plugin-postcss';
+
+const fs = require('fs-extra');
+const path = require('path');
+
+let entries = [];
+
+fs.readdirSync(path.resolve(__dirname, './src/components/')).forEach(folder => {
+    fs.readdirSync(path.resolve(__dirname, './src/components/' + folder)).forEach(file => {
+        if (file !== 'index.js' && file !== 'index.d.ts') {
+            let name = file.split(/(.vue)$|(.js)$/)[0].toLowerCase();
+            if (/\.vue$/.test(file)) {
+                entries.push({
+                    input: 'src/components/' + folder + '/' + file,
+                    external: [/\.\./],
+                    output: [
+                        {
+                            format: 'esm',
+                            file: 'dist/' + folder + '/' + name + '.esm.js'
+                        },
+                        {
+                            format: 'umd',
+                            name: 'primevue',
+                            file: 'dist/' + folder + '/' + name + '.umd.js'
+                        }
+                    ],
+                    plugins: [
+                        vue(),
+                        postcss()
+                    ]
+                });
+            }
+        }
+    });
+});
+
+export default entries;
\ No newline at end of file
diff --git a/src/components/breadcrumb/Breadcrumb.vue b/src/components/breadcrumb/Breadcrumb.vue
index c4588abbe..e65a1d2bf 100755
--- a/src/components/breadcrumb/Breadcrumb.vue
+++ b/src/components/breadcrumb/Breadcrumb.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import BreadcrumbItem from './BreadcrumbItem';
+import BreadcrumbItem from './BreadcrumbItem.vue';
 
 export default {
     props: {
diff --git a/src/components/cascadeselect/CascadeSelect.vue b/src/components/cascadeselect/CascadeSelect.vue
index 95993d2c0..03bf257e4 100644
--- a/src/components/cascadeselect/CascadeSelect.vue
+++ b/src/components/cascadeselect/CascadeSelect.vue
@@ -29,7 +29,7 @@
 import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
 import ObjectUtils from '../utils/ObjectUtils';
 import DomHandler from '../utils/DomHandler';
-import CascadeSelectSub from './CascadeSelectSub';
+import CascadeSelectSub from './CascadeSelectSub.vue';
 
 export default {
     emits: ['update:modelValue','change','group-change', 'before-show','before-hide','hide','show'],
diff --git a/src/components/contextmenu/ContextMenu.vue b/src/components/contextmenu/ContextMenu.vue
index 0e23c4641..8fa8e36e6 100755
--- a/src/components/contextmenu/ContextMenu.vue
+++ b/src/components/contextmenu/ContextMenu.vue
@@ -8,7 +8,7 @@
 
 <script>
 import DomHandler from '../utils/DomHandler';
-import ContextMenuSub from './ContextMenuSub';
+import ContextMenuSub from './ContextMenuSub.vue';
 
 export default {
     props: {
diff --git a/src/components/datatable/BodyCell.vue b/src/components/datatable/BodyCell.vue
index abacc9ab5..82da5f3ee 100755
--- a/src/components/datatable/BodyCell.vue
+++ b/src/components/datatable/BodyCell.vue
@@ -32,7 +32,7 @@
 <script>
 import DomHandler from '../utils/DomHandler';
 import ObjectUtils from '../utils/ObjectUtils';
-import RowRadioButton from './RowRadioButton';
+import RowRadioButton from './RowRadioButton.vue';
 import RowCheckbox from './RowCheckbox.vue';
 import Ripple from '../ripple/Ripple';
 
diff --git a/src/components/datatable/ScrollableView.vue b/src/components/datatable/ScrollableView.vue
index feba64cf3..b3f2590a6 100755
--- a/src/components/datatable/ScrollableView.vue
+++ b/src/components/datatable/ScrollableView.vue
@@ -47,7 +47,7 @@
 
 <script>
 import DomHandler from '../utils/DomHandler';
-import TableLoadingBody from './TableLoadingBody';
+import TableLoadingBody from './TableLoadingBody.vue';
 
 export default {
     emits: ['virtual-scroll'],
diff --git a/src/components/galleria/Galleria.vue b/src/components/galleria/Galleria.vue
index adf610728..94a83ec1e 100755
--- a/src/components/galleria/Galleria.vue
+++ b/src/components/galleria/Galleria.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import GalleriaContent from './GalleriaContent';
+import GalleriaContent from './GalleriaContent.vue';
 import DomHandler from '../utils/DomHandler';
 
 export default {
diff --git a/src/components/galleria/GalleriaContent.vue b/src/components/galleria/GalleriaContent.vue
index be7169321..b7616f5dd 100755
--- a/src/components/galleria/GalleriaContent.vue
+++ b/src/components/galleria/GalleriaContent.vue
@@ -25,9 +25,9 @@
 
 <script>
 import UniqueComponentId from '../utils/UniqueComponentId';
-import GalleriaItem from './GalleriaItem';
-import GalleriaThumbnails from './GalleriaThumbnails';
-import GalleriaItemSlot from './GalleriaItemSlot';
+import GalleriaItem from './GalleriaItem.vue';
+import GalleriaThumbnails from './GalleriaThumbnails.vue';
+import GalleriaItemSlot from './GalleriaItemSlot.vue';
 import Ripple from '../ripple/Ripple';
 
 export default {
diff --git a/src/components/menu/Menu.vue b/src/components/menu/Menu.vue
index ad7de1e07..cbb74f987 100755
--- a/src/components/menu/Menu.vue
+++ b/src/components/menu/Menu.vue
@@ -21,7 +21,7 @@
 <script>
 import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
 import DomHandler from '../utils/DomHandler';
-import Menuitem from './Menuitem';
+import Menuitem from './Menuitem.vue';
 
 export default {
     props: {
diff --git a/src/components/menubar/Menubar.vue b/src/components/menubar/Menubar.vue
index 69d278cd0..66337c6c6 100755
--- a/src/components/menubar/Menubar.vue
+++ b/src/components/menubar/Menubar.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import MenubarSub from './MenubarSub';
+import MenubarSub from './MenubarSub.vue';
 import DomHandler from '../utils/DomHandler';
 
 export default {
diff --git a/src/components/organizationchart/OrganizationChart.vue b/src/components/organizationchart/OrganizationChart.vue
index 3739c725d..460ff0744 100755
--- a/src/components/organizationchart/OrganizationChart.vue
+++ b/src/components/organizationchart/OrganizationChart.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import OrganizationChartNode from './OrganizationChartNode';
+import OrganizationChartNode from './OrganizationChartNode.vue';
 
 export default {
     emits: ['node-unselect', 'node-select', 'update:selectionKeys', 'node-expand', 'node-collapse', 'update:collapsedKeys'],
diff --git a/src/components/paginator/Paginator.vue b/src/components/paginator/Paginator.vue
index 5719ef8c9..f321f3074 100755
--- a/src/components/paginator/Paginator.vue
+++ b/src/components/paginator/Paginator.vue
@@ -21,13 +21,13 @@
 </template>
 
 <script>
-import CurrrentPageReport from './CurrentPageReport';
-import FirstPageLink from './FirstPageLink';
-import LastPageLink from './LastPageLink';
-import NextPageLink from './NextPageLink';
-import PageLinks from './PageLinks';
-import PrevPageLink from './PrevPageLink';
-import RowsPerPageDropdown from './RowsPerPageDropdown';
+import CurrrentPageReport from './CurrentPageReport.vue';
+import FirstPageLink from './FirstPageLink.vue';
+import LastPageLink from './LastPageLink.vue';
+import NextPageLink from './NextPageLink.vue';
+import PageLinks from './PageLinks.vue';
+import PrevPageLink from './PrevPageLink.vue';
+import RowsPerPageDropdown from './RowsPerPageDropdown.vue';
 
 export default {
     emits: ['update:first', 'update:rows', 'page'],
diff --git a/src/components/panelmenu/PanelMenu.vue b/src/components/panelmenu/PanelMenu.vue
index ba5426177..455ec314b 100755
--- a/src/components/panelmenu/PanelMenu.vue
+++ b/src/components/panelmenu/PanelMenu.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script>
-import PanelMenuSub from './PanelMenuSub';
+import PanelMenuSub from './PanelMenuSub.vue';
 import UniqueComponentId from '../utils/UniqueComponentId';
 
 export default {
diff --git a/src/components/tieredmenu/TieredMenu.vue b/src/components/tieredmenu/TieredMenu.vue
index 102579e21..bef54be74 100755
--- a/src/components/tieredmenu/TieredMenu.vue
+++ b/src/components/tieredmenu/TieredMenu.vue
@@ -9,7 +9,7 @@
 <script>
 import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
 import DomHandler from '../utils/DomHandler';
-import TieredMenuSub from './TieredMenuSub';
+import TieredMenuSub from './TieredMenuSub.vue';
 
 export default {
     props: {
diff --git a/src/components/toast/Toast.vue b/src/components/toast/Toast.vue
index 11e9bf8b8..9322332eb 100755
--- a/src/components/toast/Toast.vue
+++ b/src/components/toast/Toast.vue
@@ -8,7 +8,7 @@
 
 <script>
 import ToastEventBus from '../toastservice/ToastEventBus';
-import ToastMessage from './ToastMessage';
+import ToastMessage from './ToastMessage.vue';
 import DomHandler from '../utils/DomHandler';
 
 var messageIdx = 0;
diff --git a/src/components/tree/Tree.vue b/src/components/tree/Tree.vue
index 0c33b8c98..40b9b23e9 100755
--- a/src/components/tree/Tree.vue
+++ b/src/components/tree/Tree.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import TreeNode from './TreeNode';
+import TreeNode from './TreeNode.vue';
 import ObjectUtils from '../utils/ObjectUtils';
 
 export default {
diff --git a/src/components/treetable/TreeTable.vue b/src/components/treetable/TreeTable.vue
index 5d46a991f..cb472ad1d 100755
--- a/src/components/treetable/TreeTable.vue
+++ b/src/components/treetable/TreeTable.vue
@@ -78,7 +78,7 @@
 import ObjectUtils from '../utils/ObjectUtils';
 import FilterUtils from '../utils/FilterUtils';
 import DomHandler from '../utils/DomHandler';
-import TreeTableRow from './TreeTableRow';
+import TreeTableRow from './TreeTableRow.vue';
 import Paginator from '../paginator/Paginator';
 
 export default {