From 3bcb5b4eef9995e776fb2be29fe9e9d7433d322b Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 1 Apr 2024 13:05:49 +0300
Subject: [PATCH] Update migration

---
 .../v4/breakingchanges/PluginDoc.vue          | 48 +++++++++++++++++++
 pages/migration/v4/index.vue                  |  6 +++
 2 files changed, 54 insertions(+)
 create mode 100644 doc/migration/v4/breakingchanges/PluginDoc.vue

diff --git a/doc/migration/v4/breakingchanges/PluginDoc.vue b/doc/migration/v4/breakingchanges/PluginDoc.vue
new file mode 100644
index 000000000..84c203133
--- /dev/null
+++ b/doc/migration/v4/breakingchanges/PluginDoc.vue
@@ -0,0 +1,48 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The <i>PrimeVue</i> plugin is replaced with <i>PrimeVueStyled</i> and <i>PrimeVueUnstyled</i> plugins depending on the theming mode.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
+    <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+//v3 styled mode
+import PrimeVue from 'primevue/config';
+
+const app = createApp(App);
+app.use(PrimeVue);
+
+//v4 styled mode
+import PrimeVueStyled from 'primevue/styled';
+
+const app = createApp(App);
+app.use(PrimeVueStyled);
+`
+            },
+            code2: {
+                basic: `
+///v3 unstyled mode
+import PrimeVue from 'primevue/config';
+
+const app = createApp(App);
+app.use(PrimeVue, {
+    unstyled: true
+});
+
+///v4 unstyled mode
+import PrimeVueUnstyled from 'primevue/styled';
+
+const app = createApp(App);
+app.use(PrimeVueUnstyled);
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/pages/migration/v4/index.vue b/pages/migration/v4/index.vue
index 1a76404f6..9c2ece647 100644
--- a/pages/migration/v4/index.vue
+++ b/pages/migration/v4/index.vue
@@ -19,6 +19,7 @@
 import NewFeaturesDoc from '@/doc/migration/v4/NewFeaturesDoc.vue';
 import OverviewDoc from '@/doc/migration/v4/OverviewDoc.vue';
 import ComponentsDoc from '@/doc/migration/v4/breakingchanges/ComponentsDoc.vue';
+import PluginDoc from '@/doc/migration/v4/breakingchanges/PluginDoc.vue';
 import StyledModeDoc from '@/doc/migration/v4/breakingchanges/StyledModeDoc.vue';
 
 export default {
@@ -39,6 +40,11 @@ export default {
                     id: 'breakingchanges',
                     label: 'Breaking Changes',
                     children: [
+                        {
+                            id: 'pluging',
+                            label: 'Plugin',
+                            component: PluginDoc
+                        },
                         {
                             id: 'styledmode',
                             label: 'Styled Mode',