From cdeb4ae1cc25517727745705005e8f7565cb7956 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 18 Jan 2021 14:20:34 +0300
Subject: [PATCH] New build improvements based on rollup.

---
 build-meta.js                                 | 19 +++++
 gulpfile.js                                   |  2 +-
 package.json                                  |  2 +-
 rollup.config.js                              | 82 +++++++++++++------
 src/components/accordion/Accordion.vue        |  2 +-
 src/components/accordion/package.json         |  6 ++
 src/components/accordiontab/package.json      |  6 ++
 src/components/autocomplete/AutoComplete.vue  | 12 +--
 src/components/autocomplete/package.json      |  6 ++
 src/components/avatar/package.json            |  6 ++
 src/components/avatargroup/package.json       |  6 ++
 src/components/badge/package.json             |  6 ++
 .../badgedirective/BadgeDirective.js          |  4 +-
 src/components/badgedirective/package.json    |  6 ++
 src/components/blockui/BlockUI.vue            |  2 +-
 src/components/blockui/package.json           |  6 ++
 src/components/breadcrumb/package.json        |  6 ++
 src/components/button/Button.vue              |  2 +-
 src/components/button/package.json            |  6 ++
 src/components/calendar/Calendar.vue          | 10 +--
 src/components/calendar/package.json          |  6 ++
 src/components/card/package.json              |  6 ++
 src/components/carousel/Carousel.vue          |  6 +-
 src/components/carousel/package.json          |  6 ++
 .../cascadeselect/CascadeSelect.vue           |  6 +-
 .../cascadeselect/CascadeSelectSub.vue        |  6 +-
 src/components/cascadeselect/package.json     |  6 ++
 src/components/chart/package.json             |  6 ++
 src/components/checkbox/Checkbox.vue          |  2 +-
 src/components/checkbox/package.json          |  6 ++
 src/components/chip/package.json              |  6 ++
 src/components/chips/package.json             |  6 ++
 src/components/colorpicker/ColorPicker.vue    |  4 +-
 src/components/colorpicker/package.json       |  6 ++
 src/components/column/package.json            |  6 ++
 src/components/columngroup/package.json       |  6 ++
 src/components/common/package.json            |  6 ++
 src/components/config/package.json            |  6 ++
 .../ConfirmationEventBus.js                   |  0
 .../confirmationeventbus/package.json         |  5 ++
 .../ConfirmationService.js                    |  4 +-
 .../confirmationservice/package.json          |  6 ++
 .../confirmdialog/ConfirmDialog.vue           |  6 +-
 src/components/confirmdialog/package.json     |  6 ++
 src/components/confirmpopup/ConfirmPopup.vue  |  8 +-
 src/components/confirmpopup/package.json      |  6 ++
 src/components/contextmenu/ContextMenu.vue    |  2 +-
 src/components/contextmenu/ContextMenuSub.vue |  4 +-
 src/components/contextmenu/package.json       |  6 ++
 src/components/datatable/BodyCell.vue         |  6 +-
 src/components/datatable/DataTable.vue        |  8 +-
 src/components/datatable/ScrollableView.vue   |  2 +-
 src/components/datatable/TableBody.vue        |  2 +-
 src/components/datatable/TableHeader.vue      |  2 +-
 src/components/datatable/package.json         |  6 ++
 src/components/dataview/DataView.vue          |  4 +-
 src/components/dataview/package.json          |  6 ++
 .../dataviewlayoutoptions/package.json        |  6 ++
 src/components/deferredcontent/package.json   |  6 ++
 src/components/dialog/Dialog.vue              |  5 +-
 src/components/dialog/package.json            |  6 ++
 src/components/divider/package.json           |  6 ++
 src/components/dropdown/Dropdown.vue          |  8 +-
 src/components/dropdown/package.json          |  6 ++
 src/components/editor/package.json            |  6 ++
 src/components/fieldset/Fieldset.vue          |  4 +-
 src/components/fieldset/package.json          |  6 ++
 src/components/fileupload/FileUpload.vue      | 10 +--
 src/components/fileupload/package.json        |  6 ++
 src/components/fullcalendar/package.json      |  6 ++
 src/components/galleria/Galleria.vue          |  2 +-
 src/components/galleria/GalleriaContent.vue   |  4 +-
 src/components/galleria/GalleriaItem.vue      |  2 +-
 .../galleria/GalleriaThumbnails.vue           |  4 +-
 src/components/galleria/package.json          |  6 ++
 src/components/inlinemessage/package.json     |  6 ++
 src/components/inplace/Inplace.vue            |  2 +-
 src/components/inplace/package.json           |  6 ++
 src/components/inputmask/InputMask.vue        |  2 +-
 src/components/inputmask/package.json         |  6 ++
 src/components/inputnumber/InputNumber.vue    |  4 +-
 src/components/inputnumber/package.json       |  6 ++
 src/components/inputswitch/package.json       |  6 ++
 src/components/inputtext/package.json         |  6 ++
 src/components/knob/package.json              |  6 ++
 src/components/listbox/Listbox.vue            |  6 +-
 src/components/listbox/package.json           |  6 ++
 src/components/megamenu/MegaMenu.vue          |  4 +-
 src/components/megamenu/package.json          |  6 ++
 src/components/menu/Menu.vue                  |  4 +-
 src/components/menu/Menuitem.vue              |  2 +-
 src/components/menu/package.json              |  6 ++
 src/components/menubar/Menubar.vue            |  2 +-
 src/components/menubar/MenubarSub.vue         |  4 +-
 src/components/menubar/package.json           |  6 ++
 src/components/message/Message.vue            |  2 +-
 src/components/message/package.json           |  6 ++
 src/components/multiselect/MultiSelect.vue    |  8 +-
 src/components/multiselect/package.json       |  6 ++
 src/components/orderlist/OrderList.vue        |  8 +-
 src/components/orderlist/package.json         |  6 ++
 .../OrganizationChartNode.vue                 |  2 +-
 src/components/organizationchart/package.json |  6 ++
 src/components/overlaypanel/OverlayPanel.vue  |  6 +-
 src/components/overlaypanel/package.json      |  6 ++
 src/components/paginator/FirstPageLink.vue    |  2 +-
 src/components/paginator/LastPageLink.vue     |  2 +-
 src/components/paginator/NextPageLink.vue     |  2 +-
 src/components/paginator/PageLinks.vue        |  2 +-
 src/components/paginator/PrevPageLink.vue     |  2 +-
 .../paginator/RowsPerPageDropdown.vue         |  2 +-
 src/components/paginator/package.json         |  6 ++
 src/components/panel/Panel.vue                |  4 +-
 src/components/panel/package.json             |  6 ++
 src/components/panelmenu/PanelMenu.vue        |  2 +-
 src/components/panelmenu/package.json         |  6 ++
 src/components/password/Password.vue          |  4 +-
 src/components/password/package.json          |  6 ++
 src/components/picklist/PickList.vue          |  8 +-
 src/components/picklist/package.json          |  6 ++
 src/components/progressbar/package.json       |  6 ++
 src/components/progressspinner/package.json   |  6 ++
 src/components/radiobutton/RadioButton.vue    |  2 +-
 src/components/radiobutton/package.json       |  6 ++
 src/components/rating/package.json            |  6 ++
 src/components/ripple/Ripple.js               |  2 +-
 src/components/ripple/package.json            |  6 ++
 src/components/row/package.json               |  6 ++
 src/components/scrollpanel/ScrollPanel.vue    |  2 +-
 src/components/scrollpanel/package.json       |  6 ++
 src/components/scrolltop/ScrollTop.vue        |  2 +-
 src/components/scrolltop/package.json         |  6 ++
 src/components/selectbutton/SelectButton.vue  |  4 +-
 src/components/selectbutton/package.json      |  6 ++
 src/components/sidebar/Sidebar.vue            |  4 +-
 src/components/sidebar/package.json           |  6 ++
 src/components/skeleton/package.json          |  6 ++
 src/components/slider/Slider.vue              |  2 +-
 src/components/slider/package.json            |  6 ++
 src/components/splitbutton/SplitButton.vue    |  6 +-
 src/components/splitbutton/package.json       |  6 ++
 src/components/splitter/Splitter.vue          |  2 +-
 src/components/splitter/package.json          |  6 ++
 src/components/splitterpanel/package.json     |  6 ++
 src/components/steps/Steps.vue                |  2 +-
 src/components/steps/package.json             |  6 ++
 src/components/tabmenu/TabMenu.vue            |  4 +-
 src/components/tabmenu/package.json           |  6 ++
 src/components/tabpanel/package.json          |  6 ++
 src/components/tabview/TabView.vue            |  4 +-
 src/components/tabview/package.json           |  6 ++
 src/components/tag/package.json               |  6 ++
 src/components/terminal/package.json          |  6 ++
 src/components/terminalservice/package.json   |  6 ++
 src/components/textarea/package.json          |  6 ++
 src/components/tieredmenu/TieredMenu.vue      |  4 +-
 src/components/tieredmenu/TieredMenuSub.vue   |  4 +-
 src/components/tieredmenu/package.json        |  6 ++
 src/components/timeline/Timeline.vue          |  2 +-
 src/components/timeline/package.json          |  6 ++
 src/components/toast/Toast.vue                |  4 +-
 src/components/toast/ToastMessage.vue         |  2 +-
 src/components/toast/package.json             |  6 ++
 .../ToastEventBus.js                          |  0
 src/components/toasteventbus/package.json     |  5 ++
 src/components/toastservice/ToastService.js   |  6 +-
 src/components/toastservice/package.json      |  6 ++
 src/components/togglebutton/ToggleButton.vue  |  2 +-
 src/components/togglebutton/package.json      |  6 ++
 src/components/toolbar/package.json           |  6 ++
 src/components/tooltip/Tooltip.js             |  6 +-
 src/components/tooltip/package.json           |  6 ++
 src/components/tree/Tree.vue                  |  2 +-
 src/components/tree/TreeNode.vue              |  4 +-
 src/components/tree/package.json              |  6 ++
 src/components/treetable/TreeTable.vue        |  8 +-
 src/components/treetable/TreeTableRow.vue     |  6 +-
 src/components/treetable/package.json         |  6 ++
 src/components/tristatecheckbox/package.json  |  6 ++
 src/components/useconfirm/package.json        |  6 ++
 src/components/usetoast/package.json          |  6 ++
 src/components/utils/Utils.js                 |  7 ++
 src/components/utils/package.json             |  5 ++
 src/views/badge/BadgeDoc.vue                  |  2 +-
 vue.config.js                                 | 20 +++++
 185 files changed, 849 insertions(+), 185 deletions(-)
 create mode 100644 build-meta.js
 create mode 100644 src/components/accordion/package.json
 create mode 100644 src/components/accordiontab/package.json
 create mode 100644 src/components/autocomplete/package.json
 create mode 100644 src/components/avatar/package.json
 create mode 100644 src/components/avatargroup/package.json
 create mode 100644 src/components/badge/package.json
 create mode 100644 src/components/badgedirective/package.json
 create mode 100644 src/components/blockui/package.json
 create mode 100644 src/components/breadcrumb/package.json
 create mode 100644 src/components/button/package.json
 create mode 100644 src/components/calendar/package.json
 create mode 100644 src/components/card/package.json
 create mode 100644 src/components/carousel/package.json
 create mode 100644 src/components/cascadeselect/package.json
 create mode 100644 src/components/chart/package.json
 create mode 100644 src/components/checkbox/package.json
 create mode 100644 src/components/chip/package.json
 create mode 100644 src/components/chips/package.json
 create mode 100644 src/components/colorpicker/package.json
 create mode 100644 src/components/column/package.json
 create mode 100644 src/components/columngroup/package.json
 create mode 100644 src/components/common/package.json
 create mode 100644 src/components/config/package.json
 rename src/components/{confirmationservice => confirmationeventbus}/ConfirmationEventBus.js (100%)
 create mode 100644 src/components/confirmationeventbus/package.json
 create mode 100644 src/components/confirmationservice/package.json
 create mode 100644 src/components/confirmdialog/package.json
 create mode 100644 src/components/confirmpopup/package.json
 create mode 100644 src/components/contextmenu/package.json
 create mode 100644 src/components/datatable/package.json
 create mode 100644 src/components/dataview/package.json
 create mode 100644 src/components/dataviewlayoutoptions/package.json
 create mode 100644 src/components/deferredcontent/package.json
 create mode 100644 src/components/dialog/package.json
 create mode 100644 src/components/divider/package.json
 create mode 100644 src/components/dropdown/package.json
 create mode 100644 src/components/editor/package.json
 create mode 100644 src/components/fieldset/package.json
 create mode 100644 src/components/fileupload/package.json
 create mode 100644 src/components/fullcalendar/package.json
 create mode 100644 src/components/galleria/package.json
 create mode 100644 src/components/inlinemessage/package.json
 create mode 100644 src/components/inplace/package.json
 create mode 100644 src/components/inputmask/package.json
 create mode 100644 src/components/inputnumber/package.json
 create mode 100644 src/components/inputswitch/package.json
 create mode 100644 src/components/inputtext/package.json
 create mode 100644 src/components/knob/package.json
 create mode 100644 src/components/listbox/package.json
 create mode 100644 src/components/megamenu/package.json
 create mode 100644 src/components/menu/package.json
 create mode 100644 src/components/menubar/package.json
 create mode 100644 src/components/message/package.json
 create mode 100644 src/components/multiselect/package.json
 create mode 100644 src/components/orderlist/package.json
 create mode 100644 src/components/organizationchart/package.json
 create mode 100644 src/components/overlaypanel/package.json
 create mode 100644 src/components/paginator/package.json
 create mode 100644 src/components/panel/package.json
 create mode 100644 src/components/panelmenu/package.json
 create mode 100644 src/components/password/package.json
 create mode 100644 src/components/picklist/package.json
 create mode 100644 src/components/progressbar/package.json
 create mode 100644 src/components/progressspinner/package.json
 create mode 100644 src/components/radiobutton/package.json
 create mode 100644 src/components/rating/package.json
 create mode 100644 src/components/ripple/package.json
 create mode 100644 src/components/row/package.json
 create mode 100644 src/components/scrollpanel/package.json
 create mode 100644 src/components/scrolltop/package.json
 create mode 100644 src/components/selectbutton/package.json
 create mode 100644 src/components/sidebar/package.json
 create mode 100644 src/components/skeleton/package.json
 create mode 100644 src/components/slider/package.json
 create mode 100644 src/components/splitbutton/package.json
 create mode 100644 src/components/splitter/package.json
 create mode 100644 src/components/splitterpanel/package.json
 create mode 100644 src/components/steps/package.json
 create mode 100644 src/components/tabmenu/package.json
 create mode 100644 src/components/tabpanel/package.json
 create mode 100644 src/components/tabview/package.json
 create mode 100644 src/components/tag/package.json
 create mode 100644 src/components/terminal/package.json
 create mode 100644 src/components/terminalservice/package.json
 create mode 100644 src/components/textarea/package.json
 create mode 100644 src/components/tieredmenu/package.json
 create mode 100644 src/components/timeline/package.json
 create mode 100644 src/components/toast/package.json
 rename src/components/{toastservice => toasteventbus}/ToastEventBus.js (100%)
 create mode 100644 src/components/toasteventbus/package.json
 create mode 100644 src/components/toastservice/package.json
 create mode 100644 src/components/togglebutton/package.json
 create mode 100644 src/components/toolbar/package.json
 create mode 100644 src/components/tooltip/package.json
 create mode 100644 src/components/tree/package.json
 create mode 100644 src/components/treetable/package.json
 create mode 100644 src/components/tristatecheckbox/package.json
 create mode 100644 src/components/useconfirm/package.json
 create mode 100644 src/components/usetoast/package.json
 create mode 100644 src/components/utils/Utils.js
 create mode 100644 src/components/utils/package.json

diff --git a/build-meta.js b/build-meta.js
new file mode 100644
index 000000000..433130666
--- /dev/null
+++ b/build-meta.js
@@ -0,0 +1,19 @@
+const fs = require('fs-extra');
+const path = require('path');
+
+fs.readdirSync(path.resolve(__dirname, './src/components/')).forEach(folder => {
+    fs.readdirSync(path.resolve(__dirname, './src/components/' + folder)).forEach(file => {
+        if (file ==='package.json') {
+            fs.copySync(path.resolve(__dirname, './src/components/' + folder) + '/package.json', 'dist/' + folder + '/package.json');
+        }
+
+        if (file.endsWith('d.ts')) {
+            fs.copySync(path.resolve(__dirname, './src/components/' + folder) + '/' + file, 'dist/' + folder + '/' + file);
+        }
+    })
+    
+});
+
+fs.copySync(path.resolve(__dirname, './package-build.json'), 'dist/package.json');
+fs.copySync(path.resolve(__dirname, './README.md'), 'dist/README.md');
+fs.copySync(path.resolve(__dirname, './LICENSE.md'), 'dist/LICENSE.md');
\ No newline at end of file
diff --git a/gulpfile.js b/gulpfile.js
index 8928c950f..77249d62e 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -33,5 +33,5 @@ gulp.task('images', function() {
 });
 
 //Building project with run sequence
-gulp.task('build-resources', ['build-css', 'images', 'build-themes']);
+gulp.task('build-styles', ['build-css', 'images', 'build-themes']);
 
diff --git a/package.json b/package.json
index 096d31a3c..414ab4096 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build-app": "vue-cli-service build",
-    "build-lib": "node build-lib && gulp build-resources",
+    "build-lib": "rollup -c && node build-meta && gulp build-styles",
     "lint": "vue-cli-service lint",
     "test:unit": "vue-cli-service test:unit"
   },
diff --git a/rollup.config.js b/rollup.config.js
index dd38df094..1ed44d970 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -6,33 +6,67 @@ 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') {
+function addEntry(folder, inFile, outFile) {
+    entries.push({
+        input: 'src/components/' + folder + '/' + inFile,
+        output: [
+            {
+                format: 'esm',
+                file: 'dist/' + folder + '/' + outFile + '.esm.js'
+            },
+            {
+                format: 'cjs',
+                file: 'dist/' + folder + '/' + outFile + '.cjs.js'
+            },
+            {
+                format: 'umd',
+                name: 'primevue',
+                file: 'dist/' + folder + '/' + outFile + '.umd.js'
+            }
+        ],
+        plugins: [
+            vue(),
+            postcss()
+        ]
+    });
+}
+
+function addSFC() {
+    fs.readdirSync(path.resolve(__dirname, './src/components/')).forEach(folder => {
+        fs.readdirSync(path.resolve(__dirname, './src/components/' + folder)).forEach(file => {
             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()
-                    ]
-                });
+                addEntry(folder, file, name);
             }
-        }
+        });
     });
-});
+}
+
+function addDirectives() {
+    addEntry('badgedirective', 'BadgeDirective.js', 'badgedirective');
+    addEntry('ripple', 'Ripple.js', 'ripple');
+    addEntry('tooltip', 'Tooltip.js', 'tooltip');
+}
+
+function addConfig() {
+    addEntry('config', 'PrimeVue.js', 'config');
+}
+
+function addUtils() {
+    addEntry('utils', 'Utils.js', 'utils');
+}
+
+function addServices() {
+    addEntry('confirmationservice', 'ConfirmationService.js', 'confirmationservice');
+    addEntry('confirmationeventbus', 'ConfirmationEventBus.js', 'confirmationeventbus');
+    addEntry('toastservice', 'ToastService.js', 'toastservice');
+    addEntry('toasteventbus', 'ToastEventBus.js', 'toasteventbus');
+}
+
+addSFC();
+addDirectives();
+addConfig();
+addUtils();
+addServices();
 
 export default entries;
\ No newline at end of file
diff --git a/src/components/accordion/Accordion.vue b/src/components/accordion/Accordion.vue
index 7746830d5..ceaf5e761 100755
--- a/src/components/accordion/Accordion.vue
+++ b/src/components/accordion/Accordion.vue
@@ -22,7 +22,7 @@
 </template>
 
 <script>
-import UniqueComponentId from '../utils/UniqueComponentId';
+import {UniqueComponentId} from 'primevue/utils';
 
 export default {
     emits: ['tab-close', 'tab-open', 'update:activeIndex'],
diff --git a/src/components/accordion/package.json b/src/components/accordion/package.json
new file mode 100644
index 000000000..1c75f07c2
--- /dev/null
+++ b/src/components/accordion/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./accordion.cjs.js",
+  "module": "./accordion.esm.js",
+  "browser": "./accordion.umd.js",
+  "types": "./Accordion.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/accordiontab/package.json b/src/components/accordiontab/package.json
new file mode 100644
index 000000000..1dff8eb79
--- /dev/null
+++ b/src/components/accordiontab/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./accordiontab.cjs.js",
+  "module": "./accordiontab.esm.js",
+  "browser": "./accordiontab.umd.js",
+  "types": "./AccordionTab.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/autocomplete/AutoComplete.vue b/src/components/autocomplete/AutoComplete.vue
index e5cbfe997..51424d11c 100755
--- a/src/components/autocomplete/AutoComplete.vue
+++ b/src/components/autocomplete/AutoComplete.vue
@@ -29,12 +29,12 @@
 </template>
 
 <script>
-import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
-import UniqueComponentId from '../utils/UniqueComponentId';
-import ObjectUtils from '../utils/ObjectUtils';
-import DomHandler from '../utils/DomHandler';
-import Button from '../button/Button';
-import Ripple from '../ripple/Ripple';
+import {ConnectedOverlayScrollHandler} from 'primevue/utils';
+import {UniqueComponentId} from 'primevue/utils';
+import {ObjectUtils} from 'primevue/utils';
+import {DomHandler} from 'primevue/utils';
+import Button from 'primevue/button';
+import Ripple from 'primevue/ripple';
 
 export default {
     inheritAttrs: false,
diff --git a/src/components/autocomplete/package.json b/src/components/autocomplete/package.json
new file mode 100644
index 000000000..01ecfe35b
--- /dev/null
+++ b/src/components/autocomplete/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./autocomplete.cjs.js",
+  "module": "./autocomplete.esm.js",
+  "browser": "./autocomplete.umd.js",
+  "types": "./AutoComplete.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/avatar/package.json b/src/components/avatar/package.json
new file mode 100644
index 000000000..4ebbaff76
--- /dev/null
+++ b/src/components/avatar/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./avatar.cjs.js",
+  "module": "./avatar.esm.js",
+  "browser": "./avatar.umd.js",
+  "types": "./Avatar.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/avatargroup/package.json b/src/components/avatargroup/package.json
new file mode 100644
index 000000000..de1b5e3c2
--- /dev/null
+++ b/src/components/avatargroup/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./avatargroup.cjs.js",
+  "module": "./avatargroup.esm.js",
+  "browser": "./avatargroup.umd.js",
+  "types": "./AvatarGroup.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/badge/package.json b/src/components/badge/package.json
new file mode 100644
index 000000000..306121a16
--- /dev/null
+++ b/src/components/badge/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./badge.cjs.js",
+  "module": "./badge.esm.js",
+  "browser": "./badge.umd.js",
+  "types": "./Badge.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/badgedirective/BadgeDirective.js b/src/components/badgedirective/BadgeDirective.js
index 1a4c26110..6807af503 100644
--- a/src/components/badgedirective/BadgeDirective.js
+++ b/src/components/badgedirective/BadgeDirective.js
@@ -1,5 +1,5 @@
-import DomHandler from '../utils/DomHandler';
-import UniqueComponentId from '../utils/UniqueComponentId';
+import {DomHandler} from 'primevue/utils';
+import {UniqueComponentId} from 'primevue/utils';
 
 const BadgeDirective = {
     beforeMount(el, options) {
diff --git a/src/components/badgedirective/package.json b/src/components/badgedirective/package.json
new file mode 100644
index 000000000..148f63893
--- /dev/null
+++ b/src/components/badgedirective/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./badgedirective.cjs.js",
+  "module": "./badgedirective.esm.js",
+  "browser": "./badgedirective.umd.js",
+  "types": "./BadgeDirective.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/blockui/BlockUI.vue b/src/components/blockui/BlockUI.vue
index d701ad984..ce27f5096 100755
--- a/src/components/blockui/BlockUI.vue
+++ b/src/components/blockui/BlockUI.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import DomHandler from '../utils/DomHandler';
+import {DomHandler} from 'primevue/utils';
 
 export default {
     emits: ['block', 'unblock'],
diff --git a/src/components/blockui/package.json b/src/components/blockui/package.json
new file mode 100644
index 000000000..518e634fb
--- /dev/null
+++ b/src/components/blockui/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./blockui.cjs.js",
+  "module": "./blockui.esm.js",
+  "browser": "./blockui.umd.js",
+  "types": "./BlockUI.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/breadcrumb/package.json b/src/components/breadcrumb/package.json
new file mode 100644
index 000000000..cddd1f103
--- /dev/null
+++ b/src/components/breadcrumb/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./breadcrumb.cjs.js",
+  "module": "./breadcrumb.esm.js",
+  "browser": "./breadcrumb.umd.js",
+  "types": "./Breadcrumb.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/button/Button.vue b/src/components/button/Button.vue
index b290f30a2..bb9b8ed66 100755
--- a/src/components/button/Button.vue
+++ b/src/components/button/Button.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import Ripple from '../ripple/Ripple';
+import Ripple from 'primevue/ripple';
 
 export default {
     props: {
diff --git a/src/components/button/package.json b/src/components/button/package.json
new file mode 100644
index 000000000..b8990455f
--- /dev/null
+++ b/src/components/button/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./button.cjs.js",
+  "module": "./button.esm.js",
+  "browser": "./button.umd.js",
+  "types": "./Button.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/calendar/Calendar.vue b/src/components/calendar/Calendar.vue
index ca434e759..7894c3260 100755
--- a/src/components/calendar/Calendar.vue
+++ b/src/components/calendar/Calendar.vue
@@ -130,11 +130,11 @@
 </template>
 
 <script>
-import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
-import InputText from '../inputtext/InputText';
-import Button from '../button/Button';
-import DomHandler from '../utils/DomHandler';
-import Ripple from '../ripple/Ripple';
+import {ConnectedOverlayScrollHandler} from 'primevue/utils';
+import InputText from 'primevue/inputtext';
+import Button from 'primevue/button';
+import {DomHandler} from 'primevue/utils';
+import Ripple from 'primevue/ripple';
 
 export default {
     inheritAttrs: false,
diff --git a/src/components/calendar/package.json b/src/components/calendar/package.json
new file mode 100644
index 000000000..78eedb72c
--- /dev/null
+++ b/src/components/calendar/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./calendar.cjs.js",
+  "module": "./calendar.esm.js",
+  "browser": "./calendar.umd.js",
+  "types": "./Calendar.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/card/package.json b/src/components/card/package.json
new file mode 100644
index 000000000..a41eb71b0
--- /dev/null
+++ b/src/components/card/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./card.cjs.js",
+  "module": "./card.esm.js",
+  "browser": "./card.umd.js",
+  "types": "./Card.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/carousel/Carousel.vue b/src/components/carousel/Carousel.vue
index 47e6ae7d2..46369c0da 100755
--- a/src/components/carousel/Carousel.vue
+++ b/src/components/carousel/Carousel.vue
@@ -53,9 +53,9 @@
 </template>
 
 <script>
-import UniqueComponentId from '../utils/UniqueComponentId';
-import DomHandler from '../utils/DomHandler';
-import Ripple from '../ripple/Ripple';
+import {UniqueComponentId} from 'primevue/utils';
+import {DomHandler} from 'primevue/utils';
+import Ripple from 'primevue/ripple';
 
 export default {
 	emits: ['update:page'],
diff --git a/src/components/carousel/package.json b/src/components/carousel/package.json
new file mode 100644
index 000000000..20244e0da
--- /dev/null
+++ b/src/components/carousel/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./carousel.cjs.js",
+  "module": "./carousel.esm.js",
+  "browser": "./carousel.umd.js",
+  "types": "./Carousel.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/cascadeselect/CascadeSelect.vue b/src/components/cascadeselect/CascadeSelect.vue
index 03bf257e4..b2a5efb81 100644
--- a/src/components/cascadeselect/CascadeSelect.vue
+++ b/src/components/cascadeselect/CascadeSelect.vue
@@ -26,9 +26,9 @@
 </template>
 
 <script>
-import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
-import ObjectUtils from '../utils/ObjectUtils';
-import DomHandler from '../utils/DomHandler';
+import {ConnectedOverlayScrollHandler} from 'primevue/utils';
+import {ObjectUtils} from 'primevue/utils';
+import {DomHandler} from 'primevue/utils';
 import CascadeSelectSub from './CascadeSelectSub.vue';
 
 export default {
diff --git a/src/components/cascadeselect/CascadeSelectSub.vue b/src/components/cascadeselect/CascadeSelectSub.vue
index 269dab3ba..815b9163d 100644
--- a/src/components/cascadeselect/CascadeSelectSub.vue
+++ b/src/components/cascadeselect/CascadeSelectSub.vue
@@ -18,9 +18,9 @@
 </template>
 
 <script>
-import ObjectUtils from '../utils/ObjectUtils';
-import DomHandler from '../utils/DomHandler';
-import Ripple from '../ripple/Ripple';
+import {ObjectUtils} from 'primevue/utils';
+import {DomHandler} from 'primevue/utils';
+import Ripple from 'primevue/ripple';
 
 export default {
     emits: ['option-select','optiongroup-select'],
diff --git a/src/components/cascadeselect/package.json b/src/components/cascadeselect/package.json
new file mode 100644
index 000000000..d5d1dc8cf
--- /dev/null
+++ b/src/components/cascadeselect/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./cascadeselect.cjs.js",
+  "module": "./cascadeselect.esm.js",
+  "browser": "./cascadeselect.umd.js",
+  "types": "./CascadeSelect.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/chart/package.json b/src/components/chart/package.json
new file mode 100644
index 000000000..0d31f48e2
--- /dev/null
+++ b/src/components/chart/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./chart.cjs.js",
+  "module": "./chart.esm.js",
+  "browser": "./chart.umd.js",
+  "types": "./Chart.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/checkbox/Checkbox.vue b/src/components/checkbox/Checkbox.vue
index 48c5bf731..6d41e3a80 100755
--- a/src/components/checkbox/Checkbox.vue
+++ b/src/components/checkbox/Checkbox.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import ObjectUtils from '../utils/ObjectUtils';
+import {ObjectUtils} from 'primevue/utils';
 
 export default {
     inheritAttrs: false,
diff --git a/src/components/checkbox/package.json b/src/components/checkbox/package.json
new file mode 100644
index 000000000..a04cb4ced
--- /dev/null
+++ b/src/components/checkbox/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./checkbox.cjs.js",
+  "module": "./checkbox.esm.js",
+  "browser": "./checkbox.umd.js",
+  "types": "./Checkbox.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/chip/package.json b/src/components/chip/package.json
new file mode 100644
index 000000000..9a6e23570
--- /dev/null
+++ b/src/components/chip/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./chip.cjs.js",
+  "module": "./chip.esm.js",
+  "browser": "./chip.umd.js",
+  "types": "./Chip.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/chips/package.json b/src/components/chips/package.json
new file mode 100644
index 000000000..ead8f4402
--- /dev/null
+++ b/src/components/chips/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./chips.cjs.js",
+  "module": "./chips.esm.js",
+  "browser": "./chips.umd.js",
+  "types": "./Chips.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/colorpicker/ColorPicker.vue b/src/components/colorpicker/ColorPicker.vue
index a6e3b5c7e..ec47af929 100755
--- a/src/components/colorpicker/ColorPicker.vue
+++ b/src/components/colorpicker/ColorPicker.vue
@@ -20,8 +20,8 @@
 </template>
 
 <script>
-import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
-import DomHandler from '../utils/DomHandler';
+import {ConnectedOverlayScrollHandler} from 'primevue/utils';
+import {DomHandler} from 'primevue/utils';
 
 export default {
     emits: ['update:modelValue'],
diff --git a/src/components/colorpicker/package.json b/src/components/colorpicker/package.json
new file mode 100644
index 000000000..4ac68fb14
--- /dev/null
+++ b/src/components/colorpicker/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./colorpicker.cjs.js",
+  "module": "./colorpicker.esm.js",
+  "browser": "./colorpicker.umd.js",
+  "types": "./ColorPicker.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/column/package.json b/src/components/column/package.json
new file mode 100644
index 000000000..71538b586
--- /dev/null
+++ b/src/components/column/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./column.cjs.js",
+  "module": "./column.esm.js",
+  "browser": "./column.umd.js",
+  "types": "./Column.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/columngroup/package.json b/src/components/columngroup/package.json
new file mode 100644
index 000000000..c533d8fb4
--- /dev/null
+++ b/src/components/columngroup/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./columngroup.cjs.js",
+  "module": "./columngroup.esm.js",
+  "browser": "./columngroup.umd.js",
+  "types": "./ColumnGroup.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/common/package.json b/src/components/common/package.json
new file mode 100644
index 000000000..4640c779b
--- /dev/null
+++ b/src/components/common/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./common.cjs.js",
+  "module": "./common.esm.js",
+  "browser": "./common.umd.js",
+  "types": "./Common.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/config/package.json b/src/components/config/package.json
new file mode 100644
index 000000000..734663863
--- /dev/null
+++ b/src/components/config/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./config.cjs.js",
+  "module": "./config.esm.js",
+  "browser": "./config.umd.js",
+  "types": "./PrimeVue.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/confirmationservice/ConfirmationEventBus.js b/src/components/confirmationeventbus/ConfirmationEventBus.js
similarity index 100%
rename from src/components/confirmationservice/ConfirmationEventBus.js
rename to src/components/confirmationeventbus/ConfirmationEventBus.js
diff --git a/src/components/confirmationeventbus/package.json b/src/components/confirmationeventbus/package.json
new file mode 100644
index 000000000..07ad67b3c
--- /dev/null
+++ b/src/components/confirmationeventbus/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./confirmationeventbus.cjs.js",
+    "module": "./confirmationeventbus.esm.js",
+    "browser": "./confirmationeventbus.umd.js"
+  }
\ No newline at end of file
diff --git a/src/components/confirmationservice/ConfirmationService.js b/src/components/confirmationservice/ConfirmationService.js
index 22c3e9bd7..7f314435c 100644
--- a/src/components/confirmationservice/ConfirmationService.js
+++ b/src/components/confirmationservice/ConfirmationService.js
@@ -1,5 +1,5 @@
-import ConfirmationEventBus from './ConfirmationEventBus';
-import {PrimeVueConfirmSymbol} from '../useconfirm';
+import ConfirmationEventBus from 'primevue/confirmationeventbus';
+import {PrimeVueConfirmSymbol} from 'primevue/useconfirm';
 
 export default {
     install: (app) => {
diff --git a/src/components/confirmationservice/package.json b/src/components/confirmationservice/package.json
new file mode 100644
index 000000000..66dbcbbe6
--- /dev/null
+++ b/src/components/confirmationservice/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./confirmationservice.cjs.js",
+  "module": "./confirmationservice.esm.js",
+  "browser": "./confirmationservice.umd.js",
+  "types": "./ConfirmationService.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/confirmdialog/ConfirmDialog.vue b/src/components/confirmdialog/ConfirmDialog.vue
index 1fe94e944..ed3f168dd 100644
--- a/src/components/confirmdialog/ConfirmDialog.vue
+++ b/src/components/confirmdialog/ConfirmDialog.vue
@@ -10,9 +10,9 @@
 </template>
 
 <script>
-import ConfirmationEventBus from '../confirmationservice/ConfirmationEventBus';
-import Dialog from '../dialog/Dialog';
-import Button from '../button/Button';
+import ConfirmationEventBus from 'primevue/confirmationeventbus';
+import Dialog from 'primevue/dialog';
+import Button from 'primevue/button';
 
 export default {
     props: {
diff --git a/src/components/confirmdialog/package.json b/src/components/confirmdialog/package.json
new file mode 100644
index 000000000..73d53d8f1
--- /dev/null
+++ b/src/components/confirmdialog/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./confirmdialog.cjs.js",
+  "module": "./confirmdialog.esm.js",
+  "browser": "./confirmdialog.umd.js",
+  "types": "./ConfirmDialog.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/confirmpopup/ConfirmPopup.vue b/src/components/confirmpopup/ConfirmPopup.vue
index 2351d7509..1d61769cb 100644
--- a/src/components/confirmpopup/ConfirmPopup.vue
+++ b/src/components/confirmpopup/ConfirmPopup.vue
@@ -14,10 +14,10 @@
 </template>
 
 <script>
-import ConfirmationEventBus from '../confirmationservice/ConfirmationEventBus';
-import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
-import DomHandler from '../utils/DomHandler';
-import Button from '../button/Button';
+import ConfirmationEventBus from 'primevue/confirmationeventbus';
+import {ConnectedOverlayScrollHandler} from 'primevue/utils';
+import {DomHandler} from 'primevue/utils';
+import Button from 'primevue/button';
 
 export default {
     props: {
diff --git a/src/components/confirmpopup/package.json b/src/components/confirmpopup/package.json
new file mode 100644
index 000000000..ed915355d
--- /dev/null
+++ b/src/components/confirmpopup/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./confirmpopup.cjs.js",
+  "module": "./confirmpopup.esm.js",
+  "browser": "./confirmpopup.umd.js",
+  "types": "./ConfirmPopup.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/contextmenu/ContextMenu.vue b/src/components/contextmenu/ContextMenu.vue
index 8fa8e36e6..5dcffe573 100755
--- a/src/components/contextmenu/ContextMenu.vue
+++ b/src/components/contextmenu/ContextMenu.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import DomHandler from '../utils/DomHandler';
+import {DomHandler} from 'primevue/utils';
 import ContextMenuSub from './ContextMenuSub.vue';
 
 export default {
diff --git a/src/components/contextmenu/ContextMenuSub.vue b/src/components/contextmenu/ContextMenuSub.vue
index 8366b08ff..b9129b6b6 100755
--- a/src/components/contextmenu/ContextMenuSub.vue
+++ b/src/components/contextmenu/ContextMenuSub.vue
@@ -26,8 +26,8 @@
 </template>
 
 <script>
-import DomHandler from '../utils/DomHandler';
-import Ripple from '../ripple/Ripple';
+import {DomHandler} from 'primevue/utils';
+import Ripple from 'primevue/ripple';
 
 export default {
     emits: ['leaf-click'],
diff --git a/src/components/contextmenu/package.json b/src/components/contextmenu/package.json
new file mode 100644
index 000000000..4b7539000
--- /dev/null
+++ b/src/components/contextmenu/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./contextmenu.cjs.js",
+  "module": "./contextmenu.esm.js",
+  "browser": "./contextmenu.umd.js",
+  "types": "./ContextMenu.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/datatable/BodyCell.vue b/src/components/datatable/BodyCell.vue
index 82da5f3ee..2f7ec18c8 100755
--- a/src/components/datatable/BodyCell.vue
+++ b/src/components/datatable/BodyCell.vue
@@ -30,11 +30,11 @@
 </template>
 
 <script>
-import DomHandler from '../utils/DomHandler';
-import ObjectUtils from '../utils/ObjectUtils';
+import {DomHandler} from 'primevue/utils';
+import {ObjectUtils} from 'primevue/utils';
 import RowRadioButton from './RowRadioButton.vue';
 import RowCheckbox from './RowCheckbox.vue';
-import Ripple from '../ripple/Ripple';
+import Ripple from 'primevue/ripple';
 
 export default {
     emits: ['cell-edit-init', 'cell-edit-complete', 'cell-edit-cancel', 'row-edit-init', 'row-edit-save', 'row-edit-cancel',
diff --git a/src/components/datatable/DataTable.vue b/src/components/datatable/DataTable.vue
index 45e0a4c61..b66e7ad40 100755
--- a/src/components/datatable/DataTable.vue
+++ b/src/components/datatable/DataTable.vue
@@ -130,10 +130,10 @@
 </template>
 
 <script>
-import ObjectUtils from '../utils/ObjectUtils';
-import FilterUtils from '../utils/FilterUtils';
-import DomHandler from '../utils/DomHandler';
-import Paginator from '../paginator/Paginator';
+import {ObjectUtils} from 'primevue/utils';
+import {FilterUtils} from 'primevue/utils';
+import {DomHandler} from 'primevue/utils';
+import Paginator from 'primevue/paginator';
 import ScrollableView from './ScrollableView.vue';
 import TableHeader from './TableHeader.vue';
 import TableBody from './TableBody.vue';
diff --git a/src/components/datatable/ScrollableView.vue b/src/components/datatable/ScrollableView.vue
index b3f2590a6..a37f14c49 100755
--- a/src/components/datatable/ScrollableView.vue
+++ b/src/components/datatable/ScrollableView.vue
@@ -46,7 +46,7 @@
 </template>
 
 <script>
-import DomHandler from '../utils/DomHandler';
+import {DomHandler} from 'primevue/utils';
 import TableLoadingBody from './TableLoadingBody.vue';
 
 export default {
diff --git a/src/components/datatable/TableBody.vue b/src/components/datatable/TableBody.vue
index cc73bd744..c30325807 100755
--- a/src/components/datatable/TableBody.vue
+++ b/src/components/datatable/TableBody.vue
@@ -44,7 +44,7 @@
 </template>
 
 <script>
-import ObjectUtils from '../utils/ObjectUtils';
+import {ObjectUtils} from 'primevue/utils';
 import BodyCell from './BodyCell.vue';
 
 export default {
diff --git a/src/components/datatable/TableHeader.vue b/src/components/datatable/TableHeader.vue
index bd8515c9e..fd638165a 100755
--- a/src/components/datatable/TableHeader.vue
+++ b/src/components/datatable/TableHeader.vue
@@ -45,7 +45,7 @@
 </template>
 
 <script>
-import DomHandler from '../utils/DomHandler';
+import {DomHandler} from 'primevue/utils';
 import HeaderCheckbox from './HeaderCheckbox.vue';
 
 export default {
diff --git a/src/components/datatable/package.json b/src/components/datatable/package.json
new file mode 100644
index 000000000..6cb73559b
--- /dev/null
+++ b/src/components/datatable/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./datatable.cjs.js",
+  "module": "./datatable.esm.js",
+  "browser": "./datatable.umd.js",
+  "types": "./DataTable.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/dataview/DataView.vue b/src/components/dataview/DataView.vue
index 4f1e404aa..ed1ce583a 100755
--- a/src/components/dataview/DataView.vue
+++ b/src/components/dataview/DataView.vue
@@ -40,8 +40,8 @@
 	</div>
 </template>
 <script>
-import ObjectUtils from '../utils/ObjectUtils';
-import Paginator from '../paginator/Paginator';
+import {ObjectUtils} from 'primevue/utils';
+import Paginator from 'primevue/paginator';
 
 export default {
     emits: ['update:first', 'update:rows', 'page'],
diff --git a/src/components/dataview/package.json b/src/components/dataview/package.json
new file mode 100644
index 000000000..e7cf3c953
--- /dev/null
+++ b/src/components/dataview/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./dataview.cjs.js",
+  "module": "./dataview.esm.js",
+  "browser": "./dataview.umd.js",
+  "types": "./DataView.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/dataviewlayoutoptions/package.json b/src/components/dataviewlayoutoptions/package.json
new file mode 100644
index 000000000..c63dd582e
--- /dev/null
+++ b/src/components/dataviewlayoutoptions/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./dataviewlayoutoptions.cjs.js",
+  "module": "./dataviewlayoutoptions.esm.js",
+  "browser": "./dataviewlayoutoptions.umd.js",
+  "types": "./DataViewLayoutOptions.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/deferredcontent/package.json b/src/components/deferredcontent/package.json
new file mode 100644
index 000000000..8d6fd5923
--- /dev/null
+++ b/src/components/deferredcontent/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./deferredcontent.cjs.js",
+  "module": "./deferredcontent.esm.js",
+  "browser": "./deferredcontent.umd.js",
+  "types": "./DeferredContent.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/dialog/Dialog.vue b/src/components/dialog/Dialog.vue
index 8d963d7dd..5f7ee37f6 100755
--- a/src/components/dialog/Dialog.vue
+++ b/src/components/dialog/Dialog.vue
@@ -26,9 +26,8 @@
     </div>
 </template>
 <script>
-import UniqueComponentId from '../utils/UniqueComponentId';
-import DomHandler from '../utils/DomHandler';
-import Ripple from '../ripple/Ripple';
+import {UniqueComponentId,DomHandler} from 'primevue/utils';
+import Ripple from 'primevue/ripple';
 
 export default {
     inheritAttrs: false,
diff --git a/src/components/dialog/package.json b/src/components/dialog/package.json
new file mode 100644
index 000000000..c60f1340f
--- /dev/null
+++ b/src/components/dialog/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./dialog.cjs.js",
+  "module": "./dialog.esm.js",
+  "browser": "./dialog.umd.js",
+  "types": "./Dialog.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/divider/package.json b/src/components/divider/package.json
new file mode 100644
index 000000000..ba9471dd2
--- /dev/null
+++ b/src/components/divider/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./divider.cjs.js",
+  "module": "./divider.esm.js",
+  "browser": "./divider.umd.js",
+  "types": "./Divider.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/dropdown/Dropdown.vue b/src/components/dropdown/Dropdown.vue
index 7a1c31763..5a9a9dd61 100755
--- a/src/components/dropdown/Dropdown.vue
+++ b/src/components/dropdown/Dropdown.vue
@@ -40,10 +40,10 @@
 </template>
 
 <script>
-import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
-import ObjectUtils from '../utils/ObjectUtils';
-import DomHandler from '../utils/DomHandler';
-import Ripple from '../ripple/Ripple';
+import {ConnectedOverlayScrollHandler} from 'primevue/utils';
+import {ObjectUtils} from 'primevue/utils';
+import {DomHandler} from 'primevue/utils';
+import Ripple from 'primevue/ripple';
 
 export default {
     emits: ['update:modelValue', 'before-show', 'before-hide', 'show', 'hide', 'change', 'filter'],
diff --git a/src/components/dropdown/package.json b/src/components/dropdown/package.json
new file mode 100644
index 000000000..3b61c3a69
--- /dev/null
+++ b/src/components/dropdown/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./dropdown.cjs.js",
+  "module": "./dropdown.esm.js",
+  "browser": "./dropdown.umd.js",
+  "types": "./Dropdown.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/editor/package.json b/src/components/editor/package.json
new file mode 100644
index 000000000..b15b26731
--- /dev/null
+++ b/src/components/editor/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./editor.cjs.js",
+  "module": "./editor.esm.js",
+  "browser": "./editor.umd.js",
+  "types": "./Editor.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/fieldset/Fieldset.vue b/src/components/fieldset/Fieldset.vue
index 9e71b5b64..adda8e731 100755
--- a/src/components/fieldset/Fieldset.vue
+++ b/src/components/fieldset/Fieldset.vue
@@ -24,8 +24,8 @@
 </template>
 
 <script>
-import UniqueComponentId from '../utils/UniqueComponentId';
-import Ripple from '../ripple/Ripple';
+import {UniqueComponentId} from 'primevue/utils';
+import Ripple from 'primevue/ripple';
 
 export default {
     emits: ['update:collapsed', 'toggle'],
diff --git a/src/components/fieldset/package.json b/src/components/fieldset/package.json
new file mode 100644
index 000000000..2a1284132
--- /dev/null
+++ b/src/components/fieldset/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./fieldset.cjs.js",
+  "module": "./fieldset.esm.js",
+  "browser": "./fieldset.umd.js",
+  "types": "./Fieldset.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/fileupload/FileUpload.vue b/src/components/fileupload/FileUpload.vue
index 45183c27a..d45f04fe3 100755
--- a/src/components/fileupload/FileUpload.vue
+++ b/src/components/fileupload/FileUpload.vue
@@ -40,11 +40,11 @@
 </template>
 
 <script>
-import Button from '../button/Button';
-import ProgressBar from '../progressbar/ProgressBar';
-import Message from '../message/Message';
-import DomHandler from '../utils/DomHandler';
-import Ripple from '../ripple/Ripple';
+import Button from 'primevue/button';
+import ProgressBar from 'primevue/progressbar';
+import Message from 'primevue/message';
+import {DomHandler} from 'primevue/utils';
+import Ripple from 'primevue/ripple';
 
 export default {
     emits: ['select', 'uploader', 'before-upload', 'progress', 'upload', 'error', 'before-send', 'clear'],
diff --git a/src/components/fileupload/package.json b/src/components/fileupload/package.json
new file mode 100644
index 000000000..e2e72cc43
--- /dev/null
+++ b/src/components/fileupload/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./fileupload.cjs.js",
+  "module": "./fileupload.esm.js",
+  "browser": "./fileupload.umd.js",
+  "types": "./FileUpload.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/fullcalendar/package.json b/src/components/fullcalendar/package.json
new file mode 100644
index 000000000..28f642fac
--- /dev/null
+++ b/src/components/fullcalendar/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./fullcalendar.cjs.js",
+  "module": "./fullcalendar.esm.js",
+  "browser": "./fullcalendar.umd.js",
+  "types": "./FullCalendar.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/galleria/Galleria.vue b/src/components/galleria/Galleria.vue
index 94a83ec1e..56b9087d7 100755
--- a/src/components/galleria/Galleria.vue
+++ b/src/components/galleria/Galleria.vue
@@ -10,7 +10,7 @@
 
 <script>
 import GalleriaContent from './GalleriaContent.vue';
-import DomHandler from '../utils/DomHandler';
+import {DomHandler} from 'primevue/utils';
 
 export default {
     inheritAttrs: false,
diff --git a/src/components/galleria/GalleriaContent.vue b/src/components/galleria/GalleriaContent.vue
index b7616f5dd..eba47b671 100755
--- a/src/components/galleria/GalleriaContent.vue
+++ b/src/components/galleria/GalleriaContent.vue
@@ -24,11 +24,11 @@
 </template>
 
 <script>
-import UniqueComponentId from '../utils/UniqueComponentId';
+import {UniqueComponentId} from 'primevue/utils';
 import GalleriaItem from './GalleriaItem.vue';
 import GalleriaThumbnails from './GalleriaThumbnails.vue';
 import GalleriaItemSlot from './GalleriaItemSlot.vue';
-import Ripple from '../ripple/Ripple';
+import Ripple from 'primevue/ripple';
 
 export default {
     inheritAttrs: false,
diff --git a/src/components/galleria/GalleriaItem.vue b/src/components/galleria/GalleriaItem.vue
index 067f7e467..4e4248f3b 100755
--- a/src/components/galleria/GalleriaItem.vue
+++ b/src/components/galleria/GalleriaItem.vue
@@ -26,7 +26,7 @@
 </template>
 
 <script>
-import Ripple from '../ripple/Ripple';
+import Ripple from 'primevue/ripple';
 
 export default {
     emits: ['start-slideshow', 'stop-slideshow', 'update:activeIndex'],
diff --git a/src/components/galleria/GalleriaThumbnails.vue b/src/components/galleria/GalleriaThumbnails.vue
index afe591bde..aa67b9987 100755
--- a/src/components/galleria/GalleriaThumbnails.vue
+++ b/src/components/galleria/GalleriaThumbnails.vue
@@ -26,8 +26,8 @@
 </template>
 
 <script>
-import DomHandler from '../utils/DomHandler';
-import Ripple from '../ripple/Ripple';
+import {DomHandler} from 'primevue/utils';
+import Ripple from 'primevue/ripple';
 
 export default {
     emits: ['stop-slideshow', 'update:activeIndex'],
diff --git a/src/components/galleria/package.json b/src/components/galleria/package.json
new file mode 100644
index 000000000..d76fbbf7b
--- /dev/null
+++ b/src/components/galleria/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./galleria.cjs.js",
+  "module": "./galleria.esm.js",
+  "browser": "./galleria.umd.js",
+  "types": "./Galleria.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/inlinemessage/package.json b/src/components/inlinemessage/package.json
new file mode 100644
index 000000000..be3ece90a
--- /dev/null
+++ b/src/components/inlinemessage/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./inlinemessage.cjs.js",
+  "module": "./inlinemessage.esm.js",
+  "browser": "./inlinemessage.umd.js",
+  "types": "./InlineMessage.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/inplace/Inplace.vue b/src/components/inplace/Inplace.vue
index ab6cfca88..4df4d3546 100755
--- a/src/components/inplace/Inplace.vue
+++ b/src/components/inplace/Inplace.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import Button from '../button/Button';
+import Button from 'primevue/button';
 
 export default {
     emits: ['open', 'close', 'update:active'],
diff --git a/src/components/inplace/package.json b/src/components/inplace/package.json
new file mode 100644
index 000000000..48023aa19
--- /dev/null
+++ b/src/components/inplace/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./inplace.cjs.js",
+  "module": "./inplace.esm.js",
+  "browser": "./inplace.umd.js",
+  "types": "./Inplace.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/inputmask/InputMask.vue b/src/components/inputmask/InputMask.vue
index e1c5072bb..ff0d6789c 100755
--- a/src/components/inputmask/InputMask.vue
+++ b/src/components/inputmask/InputMask.vue
@@ -4,7 +4,7 @@
 </template>
 
 <script>
-import DomHandler from '../utils/DomHandler';
+import {DomHandler} from 'primevue/utils';
 
 export default {
     emits: ['update:modelValue', 'focus', 'blur', 'keydown', 'complete', 'keypress', 'paste'],
diff --git a/src/components/inputmask/package.json b/src/components/inputmask/package.json
new file mode 100644
index 000000000..4e353a849
--- /dev/null
+++ b/src/components/inputmask/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./inputmask.cjs.js",
+  "module": "./inputmask.esm.js",
+  "browser": "./inputmask.umd.js",
+  "types": "./InputMask.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/inputnumber/InputNumber.vue b/src/components/inputnumber/InputNumber.vue
index 1315f7426..542731b11 100755
--- a/src/components/inputnumber/InputNumber.vue
+++ b/src/components/inputnumber/InputNumber.vue
@@ -12,8 +12,8 @@
 </template>
 
 <script>
-import InputText from '../inputtext/InputText';
-import Button from '../button/Button';
+import InputText from 'primevue/inputtext';
+import Button from 'primevue/button';
 
 export default {
     inheritAttrs: false,
diff --git a/src/components/inputnumber/package.json b/src/components/inputnumber/package.json
new file mode 100644
index 000000000..02730a743
--- /dev/null
+++ b/src/components/inputnumber/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./inputnumber.cjs.js",
+  "module": "./inputnumber.esm.js",
+  "browser": "./inputnumber.umd.js",
+  "types": "./InputNumber.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/inputswitch/package.json b/src/components/inputswitch/package.json
new file mode 100644
index 000000000..63b893e18
--- /dev/null
+++ b/src/components/inputswitch/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./inputswitch.cjs.js",
+  "module": "./inputswitch.esm.js",
+  "browser": "./inputswitch.umd.js",
+  "types": "./InputSwitch.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/inputtext/package.json b/src/components/inputtext/package.json
new file mode 100644
index 000000000..9adbc1540
--- /dev/null
+++ b/src/components/inputtext/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./inputtext.cjs.js",
+  "module": "./inputtext.esm.js",
+  "browser": "./inputtext.umd.js",
+  "types": "./InputText.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/knob/package.json b/src/components/knob/package.json
new file mode 100644
index 000000000..8edd32eac
--- /dev/null
+++ b/src/components/knob/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./knob.cjs.js",
+  "module": "./knob.esm.js",
+  "browser": "./knob.umd.js",
+  "types": "./Knob.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/listbox/Listbox.vue b/src/components/listbox/Listbox.vue
index 7cf9bbdeb..3fd5bea0b 100755
--- a/src/components/listbox/Listbox.vue
+++ b/src/components/listbox/Listbox.vue
@@ -21,9 +21,9 @@
 </template>
 
 <script>
-import ObjectUtils from '../utils/ObjectUtils';
-import DomHandler from '../utils/DomHandler';
-import Ripple from '../ripple/Ripple';
+import {ObjectUtils} from 'primevue/utils';
+import {DomHandler} from 'primevue/utils';
+import Ripple from 'primevue/ripple';
 
 export default {
     emits: ['update:modelValue', 'change', 'filter'],
diff --git a/src/components/listbox/package.json b/src/components/listbox/package.json
new file mode 100644
index 000000000..516142491
--- /dev/null
+++ b/src/components/listbox/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./listbox.cjs.js",
+  "module": "./listbox.esm.js",
+  "browser": "./listbox.umd.js",
+  "types": "./Listbox.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/megamenu/MegaMenu.vue b/src/components/megamenu/MegaMenu.vue
index b943ca038..528888611 100755
--- a/src/components/megamenu/MegaMenu.vue
+++ b/src/components/megamenu/MegaMenu.vue
@@ -51,8 +51,8 @@
 </template>
 
 <script>
-import DomHandler from '../utils/DomHandler';
-import Ripple from '../ripple/Ripple';
+import {DomHandler} from 'primevue/utils';
+import Ripple from 'primevue/ripple';
 
 export default {
     props: {
diff --git a/src/components/megamenu/package.json b/src/components/megamenu/package.json
new file mode 100644
index 000000000..dc241c5bd
--- /dev/null
+++ b/src/components/megamenu/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./megamenu.cjs.js",
+  "module": "./megamenu.esm.js",
+  "browser": "./megamenu.umd.js",
+  "types": "./MegaMenu.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/menu/Menu.vue b/src/components/menu/Menu.vue
index cbb74f987..799fa4c1b 100755
--- a/src/components/menu/Menu.vue
+++ b/src/components/menu/Menu.vue
@@ -19,8 +19,8 @@
 </template>
 
 <script>
-import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
-import DomHandler from '../utils/DomHandler';
+import {ConnectedOverlayScrollHandler} from 'primevue/utils';
+import {DomHandler} from 'primevue/utils';
 import Menuitem from './Menuitem.vue';
 
 export default {
diff --git a/src/components/menu/Menuitem.vue b/src/components/menu/Menuitem.vue
index 14b560035..2e83baf6a 100755
--- a/src/components/menu/Menuitem.vue
+++ b/src/components/menu/Menuitem.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import Ripple from '../ripple/Ripple';
+import Ripple from 'primevue/ripple';
 
 export default {
     inheritAttrs: false,
diff --git a/src/components/menu/package.json b/src/components/menu/package.json
new file mode 100644
index 000000000..75bf60c5a
--- /dev/null
+++ b/src/components/menu/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./menu.cjs.js",
+  "module": "./menu.esm.js",
+  "browser": "./menu.umd.js",
+  "types": "./Menu.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/menubar/Menubar.vue b/src/components/menubar/Menubar.vue
index 66337c6c6..5624a3bca 100755
--- a/src/components/menubar/Menubar.vue
+++ b/src/components/menubar/Menubar.vue
@@ -15,7 +15,7 @@
 
 <script>
 import MenubarSub from './MenubarSub.vue';
-import DomHandler from '../utils/DomHandler';
+import {DomHandler} from 'primevue/utils';
 
 export default {
     props: {
diff --git a/src/components/menubar/MenubarSub.vue b/src/components/menubar/MenubarSub.vue
index ca3517459..a246bb9ec 100755
--- a/src/components/menubar/MenubarSub.vue
+++ b/src/components/menubar/MenubarSub.vue
@@ -24,8 +24,8 @@
 </template>
 
 <script>
-import DomHandler from '../utils/DomHandler';
-import Ripple from '../ripple/Ripple';
+import {DomHandler} from 'primevue/utils';
+import Ripple from 'primevue/ripple';
 
 export default {
     name: 'sub-menu',
diff --git a/src/components/menubar/package.json b/src/components/menubar/package.json
new file mode 100644
index 000000000..ec4528929
--- /dev/null
+++ b/src/components/menubar/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./menubar.cjs.js",
+  "module": "./menubar.esm.js",
+  "browser": "./menubar.umd.js",
+  "types": "./Menubar.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/message/Message.vue b/src/components/message/Message.vue
index a6a90452c..645e58536 100755
--- a/src/components/message/Message.vue
+++ b/src/components/message/Message.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script>
-import Ripple from '../ripple/Ripple';
+import Ripple from 'primevue/ripple';
 
 export default {
     emits: ['close'],
diff --git a/src/components/message/package.json b/src/components/message/package.json
new file mode 100644
index 000000000..fcb8ca974
--- /dev/null
+++ b/src/components/message/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./message.cjs.js",
+  "module": "./message.esm.js",
+  "browser": "./message.umd.js",
+  "types": "./Message.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/multiselect/MultiSelect.vue b/src/components/multiselect/MultiSelect.vue
index f64ae9db7..0e7309dd6 100755
--- a/src/components/multiselect/MultiSelect.vue
+++ b/src/components/multiselect/MultiSelect.vue
@@ -64,10 +64,10 @@
 </template>
 
 <script>
-import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
-import ObjectUtils from '../utils/ObjectUtils';
-import DomHandler from '../utils/DomHandler';
-import Ripple from '../ripple/Ripple';
+import {ConnectedOverlayScrollHandler} from 'primevue/utils';
+import {ObjectUtils} from 'primevue/utils';
+import {DomHandler} from 'primevue/utils';
+import Ripple from 'primevue/ripple';
 
 export default {
     emits: ['update:modelValue', 'before-show', 'before-hide', 'change', 'show', 'hide', 'filter'],
diff --git a/src/components/multiselect/package.json b/src/components/multiselect/package.json
new file mode 100644
index 000000000..7f64fd895
--- /dev/null
+++ b/src/components/multiselect/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./multiselect.cjs.js",
+  "module": "./multiselect.esm.js",
+  "browser": "./multiselect.umd.js",
+  "types": "./MultiSelect.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/orderlist/OrderList.vue b/src/components/orderlist/OrderList.vue
index cbddbd590..716139221 100755
--- a/src/components/orderlist/OrderList.vue
+++ b/src/components/orderlist/OrderList.vue
@@ -24,10 +24,10 @@
 </template>
 
 <script>
-import Button from '../button/Button';
-import ObjectUtils from '../utils/ObjectUtils';
-import DomHandler from '../utils/DomHandler';
-import Ripple from '../ripple/Ripple';
+import Button from 'primevue/button';
+import {ObjectUtils} from 'primevue/utils';
+import {DomHandler} from 'primevue/utils';
+import Ripple from 'primevue/ripple';
 
 export default {
     emits: ['update:modelValue', 'reorder', 'update:selection', 'selection-change'],
diff --git a/src/components/orderlist/package.json b/src/components/orderlist/package.json
new file mode 100644
index 000000000..b733280f2
--- /dev/null
+++ b/src/components/orderlist/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./orderlist.cjs.js",
+  "module": "./orderlist.esm.js",
+  "browser": "./orderlist.umd.js",
+  "types": "./OrderList.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/organizationchart/OrganizationChartNode.vue b/src/components/organizationchart/OrganizationChartNode.vue
index 4ef863c17..6d0227b04 100755
--- a/src/components/organizationchart/OrganizationChartNode.vue
+++ b/src/components/organizationchart/OrganizationChartNode.vue
@@ -40,7 +40,7 @@
 </template>
 
 <script>
-import DomHandler from '../utils/DomHandler';
+import {DomHandler} from 'primevue/utils';
 
 export default {
     emits: ['node-click', 'node-toggle'],
diff --git a/src/components/organizationchart/package.json b/src/components/organizationchart/package.json
new file mode 100644
index 000000000..65269a9a7
--- /dev/null
+++ b/src/components/organizationchart/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./organizationchart.cjs.js",
+  "module": "./organizationchart.esm.js",
+  "browser": "./organizationchart.umd.js",
+  "types": "./OrganizationChart.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/overlaypanel/OverlayPanel.vue b/src/components/overlaypanel/OverlayPanel.vue
index 9be1300ae..1c6b8ce26 100755
--- a/src/components/overlaypanel/OverlayPanel.vue
+++ b/src/components/overlaypanel/OverlayPanel.vue
@@ -12,9 +12,9 @@
 </template>
 
 <script>
-import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
-import DomHandler from '../utils/DomHandler';
-import Ripple from '../ripple/Ripple';
+import {ConnectedOverlayScrollHandler} from 'primevue/utils';
+import {DomHandler} from 'primevue/utils';
+import Ripple from 'primevue/ripple';
 
 export default {
     props: {
diff --git a/src/components/overlaypanel/package.json b/src/components/overlaypanel/package.json
new file mode 100644
index 000000000..fd56b1677
--- /dev/null
+++ b/src/components/overlaypanel/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./overlaypanel.cjs.js",
+  "module": "./overlaypanel.esm.js",
+  "browser": "./overlaypanel.umd.js",
+  "types": "./OverlayPanel.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/paginator/FirstPageLink.vue b/src/components/paginator/FirstPageLink.vue
index 0579181e2..77e7b5adb 100755
--- a/src/components/paginator/FirstPageLink.vue
+++ b/src/components/paginator/FirstPageLink.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import Ripple from '../ripple/Ripple';
+import Ripple from 'primevue/ripple';
 
 export default {
     computed: {
diff --git a/src/components/paginator/LastPageLink.vue b/src/components/paginator/LastPageLink.vue
index ffc8a6463..7a375a5a3 100755
--- a/src/components/paginator/LastPageLink.vue
+++ b/src/components/paginator/LastPageLink.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import Ripple from '../ripple/Ripple';
+import Ripple from 'primevue/ripple';
 
 export default {
     computed: {
diff --git a/src/components/paginator/NextPageLink.vue b/src/components/paginator/NextPageLink.vue
index 34b2a1e43..494b959a3 100755
--- a/src/components/paginator/NextPageLink.vue
+++ b/src/components/paginator/NextPageLink.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import Ripple from '../ripple/Ripple';
+import Ripple from 'primevue/ripple';
 
 export default {
     computed: {
diff --git a/src/components/paginator/PageLinks.vue b/src/components/paginator/PageLinks.vue
index f26c0181b..1577f9bac 100755
--- a/src/components/paginator/PageLinks.vue
+++ b/src/components/paginator/PageLinks.vue
@@ -5,7 +5,7 @@
     </span>
 </template>
 <script>
-import Ripple from '../ripple/Ripple';
+import Ripple from 'primevue/ripple';
 
 export default {
     inheritAttrs: false,
diff --git a/src/components/paginator/PrevPageLink.vue b/src/components/paginator/PrevPageLink.vue
index 88d56b110..232c4fa60 100755
--- a/src/components/paginator/PrevPageLink.vue
+++ b/src/components/paginator/PrevPageLink.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import Ripple from '../ripple/Ripple';
+import Ripple from 'primevue/ripple';
 
 export default {
     computed: {
diff --git a/src/components/paginator/RowsPerPageDropdown.vue b/src/components/paginator/RowsPerPageDropdown.vue
index fe6c0ee70..108b89999 100755
--- a/src/components/paginator/RowsPerPageDropdown.vue
+++ b/src/components/paginator/RowsPerPageDropdown.vue
@@ -4,7 +4,7 @@
 </template>
 
 <script>
-import Dropdown from '../dropdown/Dropdown';
+import Dropdown from 'primevue/dropdown';
 
 export default {
     inheritAttrs: false,
diff --git a/src/components/paginator/package.json b/src/components/paginator/package.json
new file mode 100644
index 000000000..729aec308
--- /dev/null
+++ b/src/components/paginator/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./paginator.cjs.js",
+  "module": "./paginator.esm.js",
+  "browser": "./paginator.umd.js",
+  "types": "./Paginator.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/panel/Panel.vue b/src/components/panel/Panel.vue
index 7c6770d51..807966a07 100755
--- a/src/components/panel/Panel.vue
+++ b/src/components/panel/Panel.vue
@@ -23,8 +23,8 @@
 </template>
 
 <script>
-import UniqueComponentId from '../utils/UniqueComponentId';
-import Ripple from '../ripple/Ripple';
+import {UniqueComponentId} from 'primevue/utils';
+import Ripple from 'primevue/ripple';
 
 export default {
     emits: ['update:collapsed', 'toggle'],
diff --git a/src/components/panel/package.json b/src/components/panel/package.json
new file mode 100644
index 000000000..76b0a695f
--- /dev/null
+++ b/src/components/panel/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./panel.cjs.js",
+  "module": "./panel.esm.js",
+  "browser": "./panel.umd.js",
+  "types": "./Panel.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/panelmenu/PanelMenu.vue b/src/components/panelmenu/PanelMenu.vue
index 455ec314b..72dc3490d 100755
--- a/src/components/panelmenu/PanelMenu.vue
+++ b/src/components/panelmenu/PanelMenu.vue
@@ -25,7 +25,7 @@
 
 <script>
 import PanelMenuSub from './PanelMenuSub.vue';
-import UniqueComponentId from '../utils/UniqueComponentId';
+import {UniqueComponentId} from 'primevue/utils';
 
 export default {
     props: {
diff --git a/src/components/panelmenu/package.json b/src/components/panelmenu/package.json
new file mode 100644
index 000000000..f9949c214
--- /dev/null
+++ b/src/components/panelmenu/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./panelmenu.cjs.js",
+  "module": "./panelmenu.esm.js",
+  "browser": "./panelmenu.umd.js",
+  "types": "./PanelMenu.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/password/Password.vue b/src/components/password/Password.vue
index 7f4aca38d..d4b6cc591 100755
--- a/src/components/password/Password.vue
+++ b/src/components/password/Password.vue
@@ -12,8 +12,8 @@
 </template>
 
 <script>
-import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
-import DomHandler from '../utils/DomHandler';
+import {ConnectedOverlayScrollHandler} from 'primevue/utils';
+import {DomHandler} from 'primevue/utils';
 
 export default {
     emits: ['update:modelValue'],
diff --git a/src/components/password/package.json b/src/components/password/package.json
new file mode 100644
index 000000000..0acb73d23
--- /dev/null
+++ b/src/components/password/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./password.cjs.js",
+  "module": "./password.esm.js",
+  "browser": "./password.umd.js",
+  "types": "./Password.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/picklist/PickList.vue b/src/components/picklist/PickList.vue
index a9f8cd35c..3d2ba8555 100755
--- a/src/components/picklist/PickList.vue
+++ b/src/components/picklist/PickList.vue
@@ -48,10 +48,10 @@
 </template>
 
 <script>
-import Button from '../button/Button';
-import ObjectUtils from '../utils/ObjectUtils';
-import DomHandler from '../utils/DomHandler';
-import Ripple from '../ripple/Ripple';
+import Button from 'primevue/button';
+import {ObjectUtils} from 'primevue/utils';
+import {DomHandler} from 'primevue/utils';
+import Ripple from 'primevue/ripple';
 
 export default {
     emits: ['update:modelValue', 'reorder', 'update:selection', 'selection-change', 'move-to-target', 'move-to-source', 'move-all-to-target', 'move-all-to-source'],
diff --git a/src/components/picklist/package.json b/src/components/picklist/package.json
new file mode 100644
index 000000000..d7f63d560
--- /dev/null
+++ b/src/components/picklist/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./picklist.cjs.js",
+  "module": "./picklist.esm.js",
+  "browser": "./picklist.umd.js",
+  "types": "./PickList.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/progressbar/package.json b/src/components/progressbar/package.json
new file mode 100644
index 000000000..aa9eb32a0
--- /dev/null
+++ b/src/components/progressbar/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./progressbar.cjs.js",
+  "module": "./progressbar.esm.js",
+  "browser": "./progressbar.umd.js",
+  "types": "./ProgressBar.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/progressspinner/package.json b/src/components/progressspinner/package.json
new file mode 100644
index 000000000..f7f377fd9
--- /dev/null
+++ b/src/components/progressspinner/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./progressspinner.cjs.js",
+  "module": "./progressspinner.esm.js",
+  "browser": "./progressspinner.umd.js",
+  "types": "./ProgressSpinner.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/radiobutton/RadioButton.vue b/src/components/radiobutton/RadioButton.vue
index 4d57d64fc..ca36c733f 100755
--- a/src/components/radiobutton/RadioButton.vue
+++ b/src/components/radiobutton/RadioButton.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import ObjectUtils from '../utils/ObjectUtils';
+import {ObjectUtils} from 'primevue/utils';
 
 export default {
     inheritAttrs: false,
diff --git a/src/components/radiobutton/package.json b/src/components/radiobutton/package.json
new file mode 100644
index 000000000..274ad3cbb
--- /dev/null
+++ b/src/components/radiobutton/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./radiobutton.cjs.js",
+  "module": "./radiobutton.esm.js",
+  "browser": "./radiobutton.umd.js",
+  "types": "./RadioButton.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/rating/package.json b/src/components/rating/package.json
new file mode 100644
index 000000000..5f4b000c1
--- /dev/null
+++ b/src/components/rating/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./rating.cjs.js",
+  "module": "./rating.esm.js",
+  "browser": "./rating.umd.js",
+  "types": "./Rating.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/ripple/Ripple.js b/src/components/ripple/Ripple.js
index f11f063d1..3c0841032 100644
--- a/src/components/ripple/Ripple.js
+++ b/src/components/ripple/Ripple.js
@@ -1,4 +1,4 @@
-import DomHandler from '../utils/DomHandler';
+import {DomHandler} from 'primevue/utils';
 
 function bindEvents(el) {
     el.addEventListener('mousedown', onMouseDown);
diff --git a/src/components/ripple/package.json b/src/components/ripple/package.json
new file mode 100644
index 000000000..9d8731388
--- /dev/null
+++ b/src/components/ripple/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./ripple.cjs.js",
+  "module": "./ripple.esm.js",
+  "browser": "./ripple.umd.js",
+  "types": "./Ripple.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/row/package.json b/src/components/row/package.json
new file mode 100644
index 000000000..68dc7e37a
--- /dev/null
+++ b/src/components/row/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./row.cjs.js",
+  "module": "./row.esm.js",
+  "browser": "./row.umd.js",
+  "types": "./Row.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/scrollpanel/ScrollPanel.vue b/src/components/scrollpanel/ScrollPanel.vue
index 005cebb3c..920cafc63 100644
--- a/src/components/scrollpanel/ScrollPanel.vue
+++ b/src/components/scrollpanel/ScrollPanel.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import DomHandler from '../utils/DomHandler';
+import {DomHandler} from 'primevue/utils';
 
 export default {
     initialized: false,
diff --git a/src/components/scrollpanel/package.json b/src/components/scrollpanel/package.json
new file mode 100644
index 000000000..99d8e2c6f
--- /dev/null
+++ b/src/components/scrollpanel/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./scrollpanel.cjs.js",
+  "module": "./scrollpanel.esm.js",
+  "browser": "./scrollpanel.umd.js",
+  "types": "./ScrollPanel.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/scrolltop/ScrollTop.vue b/src/components/scrolltop/ScrollTop.vue
index 9f627832f..fa2985418 100644
--- a/src/components/scrolltop/ScrollTop.vue
+++ b/src/components/scrolltop/ScrollTop.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import DomHandler from '../utils/DomHandler';
+import {DomHandler} from 'primevue/utils';
 
 export default {
     scrollListener: null,
diff --git a/src/components/scrolltop/package.json b/src/components/scrolltop/package.json
new file mode 100644
index 000000000..ebf552611
--- /dev/null
+++ b/src/components/scrolltop/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./scrolltop.cjs.js",
+  "module": "./scrolltop.esm.js",
+  "browser": "./scrolltop.umd.js",
+  "types": "./ScrollTop.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/selectbutton/SelectButton.vue b/src/components/selectbutton/SelectButton.vue
index bba3ba9c9..d3315963a 100755
--- a/src/components/selectbutton/SelectButton.vue
+++ b/src/components/selectbutton/SelectButton.vue
@@ -12,8 +12,8 @@
 </template>
 
 <script>
-import ObjectUtils from '../utils/ObjectUtils';
-import Ripple from '../ripple/Ripple';
+import {ObjectUtils} from 'primevue/utils';
+import Ripple from 'primevue/ripple';
 
 export default {
     emits: ['update:modelValue', 'focus', 'blur'],
diff --git a/src/components/selectbutton/package.json b/src/components/selectbutton/package.json
new file mode 100644
index 000000000..4cdcb489e
--- /dev/null
+++ b/src/components/selectbutton/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./selectbutton.cjs.js",
+  "module": "./selectbutton.esm.js",
+  "browser": "./selectbutton.umd.js",
+  "types": "./SelectButton.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/sidebar/Sidebar.vue b/src/components/sidebar/Sidebar.vue
index d68918cf7..f3ea74aaf 100755
--- a/src/components/sidebar/Sidebar.vue
+++ b/src/components/sidebar/Sidebar.vue
@@ -12,8 +12,8 @@
 </template>
 
 <script>
-import DomHandler from '../utils/DomHandler';
-import Ripple from '../ripple/Ripple';
+import {DomHandler} from 'primevue/utils';
+import Ripple from 'primevue/ripple';
 
 export default {
     emits: ['update:visible', 'show', 'hide'],
diff --git a/src/components/sidebar/package.json b/src/components/sidebar/package.json
new file mode 100644
index 000000000..87b7a6ee0
--- /dev/null
+++ b/src/components/sidebar/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./sidebar.cjs.js",
+  "module": "./sidebar.esm.js",
+  "browser": "./sidebar.umd.js",
+  "types": "./Sidebar.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/skeleton/package.json b/src/components/skeleton/package.json
new file mode 100644
index 000000000..b6496a7f6
--- /dev/null
+++ b/src/components/skeleton/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./skeleton.cjs.js",
+  "module": "./skeleton.esm.js",
+  "browser": "./skeleton.umd.js",
+  "types": "./Skeleton.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/slider/Slider.vue b/src/components/slider/Slider.vue
index a35e59e92..53c14071c 100755
--- a/src/components/slider/Slider.vue
+++ b/src/components/slider/Slider.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import DomHandler from '../utils/DomHandler';
+import {DomHandler} from 'primevue/utils';
 
 export default {
     emits: ['update:modelValue', 'change', 'slideend'],
diff --git a/src/components/slider/package.json b/src/components/slider/package.json
new file mode 100644
index 000000000..472f62994
--- /dev/null
+++ b/src/components/slider/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./slider.cjs.js",
+  "module": "./slider.esm.js",
+  "browser": "./slider.umd.js",
+  "types": "./Slider.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/splitbutton/SplitButton.vue b/src/components/splitbutton/SplitButton.vue
index 13351ac3b..8d4bf7bd6 100755
--- a/src/components/splitbutton/SplitButton.vue
+++ b/src/components/splitbutton/SplitButton.vue
@@ -9,9 +9,9 @@
 </template>
 
 <script>
-import Button from '../button/Button';
-import Menu from '../menu/Menu';
-import UniqueComponentId from '../utils/UniqueComponentId';
+import Button from 'primevue/button';
+import Menu from 'primevue/menu';
+import {UniqueComponentId} from 'primevue/utils';
 
 export default {
     inheritAttrs: false,
diff --git a/src/components/splitbutton/package.json b/src/components/splitbutton/package.json
new file mode 100644
index 000000000..42020a3c4
--- /dev/null
+++ b/src/components/splitbutton/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./splitbutton.cjs.js",
+  "module": "./splitbutton.esm.js",
+  "browser": "./splitbutton.umd.js",
+  "types": "./SplitButton.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/splitter/Splitter.vue b/src/components/splitter/Splitter.vue
index 57fada35e..e72019ba3 100644
--- a/src/components/splitter/Splitter.vue
+++ b/src/components/splitter/Splitter.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import DomHandler from '../utils/DomHandler';
+import {DomHandler} from 'primevue/utils';
 
 export default {
     emits: ['resizeend'],
diff --git a/src/components/splitter/package.json b/src/components/splitter/package.json
new file mode 100644
index 000000000..d4adfe954
--- /dev/null
+++ b/src/components/splitter/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./splitter.cjs.js",
+  "module": "./splitter.esm.js",
+  "browser": "./splitter.umd.js",
+  "types": "./Splitter.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/splitterpanel/package.json b/src/components/splitterpanel/package.json
new file mode 100644
index 000000000..6f0dc8625
--- /dev/null
+++ b/src/components/splitterpanel/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./splitterpanel.cjs.js",
+  "module": "./splitterpanel.esm.js",
+  "browser": "./splitterpanel.umd.js",
+  "types": "./SplitterPanel.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/steps/Steps.vue b/src/components/steps/Steps.vue
index 90707cddb..b48ad0b55 100755
--- a/src/components/steps/Steps.vue
+++ b/src/components/steps/Steps.vue
@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import UniqueComponentId from '../utils/UniqueComponentId';
+import {UniqueComponentId} from 'primevue/utils';
 
 export default {
     props: {
diff --git a/src/components/steps/package.json b/src/components/steps/package.json
new file mode 100644
index 000000000..c92eace93
--- /dev/null
+++ b/src/components/steps/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./steps.cjs.js",
+  "module": "./steps.esm.js",
+  "browser": "./steps.umd.js",
+  "types": "./Steps.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/tabmenu/TabMenu.vue b/src/components/tabmenu/TabMenu.vue
index e0cdbcaf5..46bc0a5dc 100755
--- a/src/components/tabmenu/TabMenu.vue
+++ b/src/components/tabmenu/TabMenu.vue
@@ -21,8 +21,8 @@
 </template>
 
 <script>
-import DomHandler from '../utils/DomHandler';
-import Ripple from '../ripple/Ripple';
+import {DomHandler} from 'primevue/utils';
+import Ripple from 'primevue/ripple';
 
 export default {
     props: {
diff --git a/src/components/tabmenu/package.json b/src/components/tabmenu/package.json
new file mode 100644
index 000000000..b47c38d9e
--- /dev/null
+++ b/src/components/tabmenu/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./tabmenu.cjs.js",
+  "module": "./tabmenu.esm.js",
+  "browser": "./tabmenu.umd.js",
+  "types": "./TabMenu.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/tabpanel/package.json b/src/components/tabpanel/package.json
new file mode 100644
index 000000000..5dacab282
--- /dev/null
+++ b/src/components/tabpanel/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./tabpanel.cjs.js",
+  "module": "./tabpanel.esm.js",
+  "browser": "./tabpanel.umd.js",
+  "types": "./TabPanel.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/tabview/TabView.vue b/src/components/tabview/TabView.vue
index d38bea3e4..66d2ea581 100755
--- a/src/components/tabview/TabView.vue
+++ b/src/components/tabview/TabView.vue
@@ -18,8 +18,8 @@
 </template>
 
 <script>
-import DomHandler from '../utils/DomHandler';
-import Ripple from '../ripple/Ripple';
+import {DomHandler} from 'primevue/utils';
+import Ripple from 'primevue/ripple';
 
 export default {
     emits: ['update:activeIndex', 'tab-change'],
diff --git a/src/components/tabview/package.json b/src/components/tabview/package.json
new file mode 100644
index 000000000..b7f72f74b
--- /dev/null
+++ b/src/components/tabview/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./tabview.cjs.js",
+  "module": "./tabview.esm.js",
+  "browser": "./tabview.umd.js",
+  "types": "./TabView.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/tag/package.json b/src/components/tag/package.json
new file mode 100644
index 000000000..9df3191da
--- /dev/null
+++ b/src/components/tag/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./tag.cjs.js",
+  "module": "./tag.esm.js",
+  "browser": "./tag.umd.js",
+  "types": "./Tag.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/terminal/package.json b/src/components/terminal/package.json
new file mode 100644
index 000000000..b6019b877
--- /dev/null
+++ b/src/components/terminal/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./terminal.cjs.js",
+  "module": "./terminal.esm.js",
+  "browser": "./terminal.umd.js",
+  "types": "./Terminal.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/terminalservice/package.json b/src/components/terminalservice/package.json
new file mode 100644
index 000000000..0c443364c
--- /dev/null
+++ b/src/components/terminalservice/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./terminalservice.cjs.js",
+  "module": "./terminalservice.esm.js",
+  "browser": "./terminalservice.umd.js",
+  "types": "./Terminalservice.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/textarea/package.json b/src/components/textarea/package.json
new file mode 100644
index 000000000..e1a147345
--- /dev/null
+++ b/src/components/textarea/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./textarea.cjs.js",
+  "module": "./textarea.esm.js",
+  "browser": "./textarea.umd.js",
+  "types": "./Textarea.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/tieredmenu/TieredMenu.vue b/src/components/tieredmenu/TieredMenu.vue
index bef54be74..812ca1d1a 100755
--- a/src/components/tieredmenu/TieredMenu.vue
+++ b/src/components/tieredmenu/TieredMenu.vue
@@ -7,8 +7,8 @@
 </template>
 
 <script>
-import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
-import DomHandler from '../utils/DomHandler';
+import {ConnectedOverlayScrollHandler} from 'primevue/utils';
+import {DomHandler} from 'primevue/utils';
 import TieredMenuSub from './TieredMenuSub.vue';
 
 export default {
diff --git a/src/components/tieredmenu/TieredMenuSub.vue b/src/components/tieredmenu/TieredMenuSub.vue
index 31acf96f7..45ff20677 100755
--- a/src/components/tieredmenu/TieredMenuSub.vue
+++ b/src/components/tieredmenu/TieredMenuSub.vue
@@ -24,8 +24,8 @@
 </template>
 
 <script>
-import DomHandler from '../utils/DomHandler';
-import Ripple from '../ripple/Ripple';
+import {DomHandler} from 'primevue/utils';
+import Ripple from 'primevue/ripple';
 
 export default {
     emits: ['leaf-click', 'keydown-item'],
diff --git a/src/components/tieredmenu/package.json b/src/components/tieredmenu/package.json
new file mode 100644
index 000000000..4b02a5430
--- /dev/null
+++ b/src/components/tieredmenu/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./tieredmenu.cjs.js",
+  "module": "./tieredmenu.esm.js",
+  "browser": "./tieredmenu.umd.js",
+  "types": "./TieredMenu.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/timeline/Timeline.vue b/src/components/timeline/Timeline.vue
index 6e205f2b7..ad712c431 100644
--- a/src/components/timeline/Timeline.vue
+++ b/src/components/timeline/Timeline.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import ObjectUtils from '../utils/ObjectUtils';
+import {ObjectUtils} from 'primevue/utils';
 
 export default {
     props: {
diff --git a/src/components/timeline/package.json b/src/components/timeline/package.json
new file mode 100644
index 000000000..a5f3bc4b0
--- /dev/null
+++ b/src/components/timeline/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./timeline.cjs.js",
+  "module": "./timeline.esm.js",
+  "browser": "./timeline.umd.js",
+  "types": "./Timeline.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/toast/Toast.vue b/src/components/toast/Toast.vue
index 9322332eb..ab0fa8f51 100755
--- a/src/components/toast/Toast.vue
+++ b/src/components/toast/Toast.vue
@@ -7,9 +7,9 @@
 </template>
 
 <script>
-import ToastEventBus from '../toastservice/ToastEventBus';
+import ToastEventBus from 'primevue/toasteventbus';
 import ToastMessage from './ToastMessage.vue';
-import DomHandler from '../utils/DomHandler';
+import {DomHandler} from 'primevue/utils';
 
 var messageIdx = 0;
 
diff --git a/src/components/toast/ToastMessage.vue b/src/components/toast/ToastMessage.vue
index 6192b1c08..dcfdb79ad 100755
--- a/src/components/toast/ToastMessage.vue
+++ b/src/components/toast/ToastMessage.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import Ripple from '../ripple/Ripple';
+import Ripple from 'primevue/ripple';
 
 export default {
     emits: ['close'],
diff --git a/src/components/toast/package.json b/src/components/toast/package.json
new file mode 100644
index 000000000..7f9ccf85b
--- /dev/null
+++ b/src/components/toast/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./toast.cjs.js",
+  "module": "./toast.esm.js",
+  "browser": "./toast.umd.js",
+  "types": "./Toast.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/toastservice/ToastEventBus.js b/src/components/toasteventbus/ToastEventBus.js
similarity index 100%
rename from src/components/toastservice/ToastEventBus.js
rename to src/components/toasteventbus/ToastEventBus.js
diff --git a/src/components/toasteventbus/package.json b/src/components/toasteventbus/package.json
new file mode 100644
index 000000000..7f1d1fb3e
--- /dev/null
+++ b/src/components/toasteventbus/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./toasteventbus.cjs.js",
+    "module": "./toasteventbus.esm.js",
+    "browser": "./toasteventbus.umd.js"
+  }
\ No newline at end of file
diff --git a/src/components/toastservice/ToastService.js b/src/components/toastservice/ToastService.js
index 259a15259..87b82303d 100755
--- a/src/components/toastservice/ToastService.js
+++ b/src/components/toastservice/ToastService.js
@@ -1,5 +1,5 @@
-import ToastEventBus from './ToastEventBus';
-import {PrimeVueToastSymbol} from '../usetoast';
+import ToastEventBus from 'primevue/toasteventbus';
+import {PrimeVueToastSymbol} from 'primevue/usetoast';
 
 export default {
     install: (app) => {
@@ -17,4 +17,4 @@ export default {
         app.config.globalProperties.$toast = ToastService;
         app.provide(PrimeVueToastSymbol, ToastService);
     }
-};
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/components/toastservice/package.json b/src/components/toastservice/package.json
new file mode 100644
index 000000000..8cdbb8ce9
--- /dev/null
+++ b/src/components/toastservice/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./toastservice.cjs.js",
+  "module": "./toastservice.esm.js",
+  "browser": "./toastservice.umd.js",
+  "types": "./ToastService.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/togglebutton/ToggleButton.vue b/src/components/togglebutton/ToggleButton.vue
index 1036e718b..29b7ff370 100755
--- a/src/components/togglebutton/ToggleButton.vue
+++ b/src/components/togglebutton/ToggleButton.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import Ripple from '../ripple/Ripple';
+import Ripple from 'primevue/ripple';
 
 export default {
     emits: ['update:modelValue', 'change'],
diff --git a/src/components/togglebutton/package.json b/src/components/togglebutton/package.json
new file mode 100644
index 000000000..3703e8e12
--- /dev/null
+++ b/src/components/togglebutton/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./togglebutton.cjs.js",
+  "module": "./togglebutton.esm.js",
+  "browser": "./togglebutton.umd.js",
+  "types": "./ToggleButton.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/toolbar/package.json b/src/components/toolbar/package.json
new file mode 100644
index 000000000..3af90518f
--- /dev/null
+++ b/src/components/toolbar/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./toolbar.cjs.js",
+  "module": "./toolbar.esm.js",
+  "browser": "./toolbar.umd.js",
+  "types": "./Toolbar.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/tooltip/Tooltip.js b/src/components/tooltip/Tooltip.js
index 36d609a64..a1c21b26b 100755
--- a/src/components/tooltip/Tooltip.js
+++ b/src/components/tooltip/Tooltip.js
@@ -1,6 +1,6 @@
-import UniqueComponentId from '../utils/UniqueComponentId';
-import DomHandler from '../utils/DomHandler';
-import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
+import {UniqueComponentId} from 'primevue/utils';
+import {DomHandler} from 'primevue/utils';
+import {ConnectedOverlayScrollHandler} from 'primevue/utils';
 
 function bindEvents(el) {
     const modifiers = el.$_ptooltipModifiers;
diff --git a/src/components/tooltip/package.json b/src/components/tooltip/package.json
new file mode 100644
index 000000000..febd9a92e
--- /dev/null
+++ b/src/components/tooltip/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./tooltip.cjs.js",
+  "module": "./tooltip.esm.js",
+  "browser": "./tooltip.umd.js",
+  "types": "./Tooltip.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/tree/Tree.vue b/src/components/tree/Tree.vue
index 40b9b23e9..c54f70157 100755
--- a/src/components/tree/Tree.vue
+++ b/src/components/tree/Tree.vue
@@ -20,7 +20,7 @@
 
 <script>
 import TreeNode from './TreeNode.vue';
-import ObjectUtils from '../utils/ObjectUtils';
+import {ObjectUtils} from 'primevue/utils';
 
 export default {
     emits: ['node-expand', 'node-collapse', 'update:expandedKeys', 'update:selectionKeys', 'node-select', 'node-unselect'],
diff --git a/src/components/tree/TreeNode.vue b/src/components/tree/TreeNode.vue
index 8a68ce91c..43876e9b2 100755
--- a/src/components/tree/TreeNode.vue
+++ b/src/components/tree/TreeNode.vue
@@ -26,8 +26,8 @@
 </template>
 
 <script>
-import DomHandler from '../utils/DomHandler';
-import Ripple from '../ripple/Ripple';
+import {DomHandler} from 'primevue/utils';
+import Ripple from 'primevue/ripple';
 
 export default {
     emits: ['node-toggle', 'node-click', 'checkbox-change'],
diff --git a/src/components/tree/package.json b/src/components/tree/package.json
new file mode 100644
index 000000000..081af3bdf
--- /dev/null
+++ b/src/components/tree/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./tree.cjs.js",
+  "module": "./tree.esm.js",
+  "browser": "./tree.umd.js",
+  "types": "./Tree.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/treetable/TreeTable.vue b/src/components/treetable/TreeTable.vue
index cb472ad1d..fc0fbf9b7 100755
--- a/src/components/treetable/TreeTable.vue
+++ b/src/components/treetable/TreeTable.vue
@@ -75,11 +75,11 @@
 </template>
 
 <script>
-import ObjectUtils from '../utils/ObjectUtils';
-import FilterUtils from '../utils/FilterUtils';
-import DomHandler from '../utils/DomHandler';
+import {ObjectUtils} from 'primevue/utils';
+import {FilterUtils} from 'primevue/utils';
+import {DomHandler} from 'primevue/utils';
 import TreeTableRow from './TreeTableRow.vue';
-import Paginator from '../paginator/Paginator';
+import Paginator from 'primevue/paginator';
 
 export default {
     emits: ['node-expand', 'node-collapse', 'update:expandedKeys', 'update:selectionKeys', 'node-select', 'node-unselect', 
diff --git a/src/components/treetable/TreeTableRow.vue b/src/components/treetable/TreeTableRow.vue
index 6b2a06c37..8746c9866 100755
--- a/src/components/treetable/TreeTableRow.vue
+++ b/src/components/treetable/TreeTableRow.vue
@@ -24,9 +24,9 @@
 </template>
 
 <script>
-import ObjectUtils from '../utils/ObjectUtils';
-import DomHandler from '../utils/DomHandler';
-import Ripple from '../ripple/Ripple';
+import {ObjectUtils} from 'primevue/utils';
+import {DomHandler} from 'primevue/utils';
+import Ripple from 'primevue/ripple';
 
 export default {
     name: 'sub-ttnode',
diff --git a/src/components/treetable/package.json b/src/components/treetable/package.json
new file mode 100644
index 000000000..079b99821
--- /dev/null
+++ b/src/components/treetable/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./treetable.cjs.js",
+  "module": "./treetable.esm.js",
+  "browser": "./treetable.umd.js",
+  "types": "./TreeTable.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/tristatecheckbox/package.json b/src/components/tristatecheckbox/package.json
new file mode 100644
index 000000000..9ef57a78d
--- /dev/null
+++ b/src/components/tristatecheckbox/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./tristatecheckbox.cjs.js",
+  "module": "./tristatecheckbox.esm.js",
+  "browser": "./tristatecheckbox.umd.js",
+  "types": "./TriStateCheckbox.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/useconfirm/package.json b/src/components/useconfirm/package.json
new file mode 100644
index 000000000..2c0c04a2a
--- /dev/null
+++ b/src/components/useconfirm/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./useconfirm.cjs.js",
+  "module": "./useconfirm.esm.js",
+  "browser": "./useconfirm.umd.js",
+  "types": "./useconfirm.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/usetoast/package.json b/src/components/usetoast/package.json
new file mode 100644
index 000000000..f260a7963
--- /dev/null
+++ b/src/components/usetoast/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "./usetoast.cjs.js",
+  "module": "./usetoast.esm.js",
+  "browser": "./usetoast.umd.js",
+  "types": "./UseToast.d.ts"
+}
\ No newline at end of file
diff --git a/src/components/utils/Utils.js b/src/components/utils/Utils.js
new file mode 100644
index 000000000..7625112cf
--- /dev/null
+++ b/src/components/utils/Utils.js
@@ -0,0 +1,7 @@
+import ConnectedOverlayScrollHandler from './ConnectedOverlayScrollHandler';
+import DomHandler from './DomHandler';
+import ObjectUtils from './ObjectUtils';
+import FilterUtils from './FilterUtils';
+import UniqueComponentId from './UniqueComponentId';
+
+export {ConnectedOverlayScrollHandler,DomHandler,ObjectUtils,FilterUtils,UniqueComponentId};
\ No newline at end of file
diff --git a/src/components/utils/package.json b/src/components/utils/package.json
new file mode 100644
index 000000000..8302ffb4c
--- /dev/null
+++ b/src/components/utils/package.json
@@ -0,0 +1,5 @@
+{
+  "main": "./utils.cjs.js",
+  "module": "./utils.esm.js",
+  "browser": "./utils.umd.js"
+}
\ No newline at end of file
diff --git a/src/views/badge/BadgeDoc.vue b/src/views/badge/BadgeDoc.vue
index 0b1edad31..29b37901d 100644
--- a/src/views/badge/BadgeDoc.vue
+++ b/src/views/badge/BadgeDoc.vue
@@ -29,7 +29,7 @@ import BadgeDirective from 'primevue/badgedirective';
 				<p>When used as a directive, badge needs to be configured at the application with a name of your choice.</p>
 <pre v-code.script>
 <code>
-import {BadgeDirective} from 'primevue/badge';
+import BadgeDirective from 'primevue/badgedirective';
 
 Vue.directive('badge', BadgeDirective);
 
diff --git a/vue.config.js b/vue.config.js
index e62633632..85492a058 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,7 +1,27 @@
+const path = require('path'); 
+
 module.exports = {
     publicPath: process.env.NODE_ENV === 'production' ? '/primevue/showcase/' : '/',
     productionSourceMap: false,
     configureWebpack: {
+        resolve: {
+            alias: {
+                'primevue/ripple': path.resolve(__dirname, 'src/components/ripple/Ripple.js'),
+                'primevue/useconfirm': path.resolve(__dirname, 'src/components/useconfirm/useconfirm.js'),
+                'primevue/usetoast': path.resolve(__dirname, 'src/components/usetoast/usetoast.js'),
+                'primevue/utils': path.resolve(__dirname, 'src/components/utils/Utils.js'),
+                'primevue/button': path.resolve(__dirname, 'src/components/button/Button.vue'),
+                'primevue/inputtext': path.resolve(__dirname, 'src/components/inputtext/InputText.vue'),
+                'primevue/dialog': path.resolve(__dirname, 'src/components/dialog/Dialog.vue'),
+                'primevue/menu': path.resolve(__dirname, 'src/components/menu/Menu.vue'),
+                'primevue/dropdown': path.resolve(__dirname, 'src/components/dropdown/Dropdown.vue'),
+                'primevue/paginator': path.resolve(__dirname, 'src/components/paginator/Paginator.vue'),
+                'primevue/progressbar': path.resolve(__dirname, 'src/components/progressbar/ProgressBar.vue'),
+                'primevue/message': path.resolve(__dirname, 'src/components/message/Message.vue'),
+                'primevue/confirmationeventbus': path.resolve(__dirname, 'src/components/confirmationeventbus/ConfirmationEventBus.js'),
+                'primevue/toasteventbus': path.resolve(__dirname, 'src/components/toasteventbus/ToastEventBus.js'),
+            },
+        },
         output: {
             libraryExport: 'default'
         }