From de03ec96a9eb2f139c62e5e73528432137a955df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Wed, 18 Oct 2023 11:22:00 +0300
Subject: [PATCH] Update README.md

---
 README.md | 64 +++++++++++++++++++++++++++++++++++++------------------
 1 file changed, 43 insertions(+), 21 deletions(-)

diff --git a/README.md b/README.md
index 724209409..689808454 100644
--- a/README.md
+++ b/README.md
@@ -14,11 +14,14 @@ PrimeVue is a rich set of open source UI Components for Vue. See [PrimeVue homep
 PrimeVue is available at [npm](https://www.npmjs.com/package/primevue).
 
 ```
-// with npm
+# Using npm
 npm install primevue
 
-// with yarn
+# Using yarn
 yarn add primevue
+
+# Using pnpm
+pnpm add nuxt-primevue
 ```
 
 ## Plugin
@@ -83,37 +86,56 @@ Component prop names are described as camel case throughout the documentation ho
 
 ## Nuxt Integration
 
-PrimeVue can easily be used with Nuxt 3 using a custom plugin.
+The [nuxt-primevue](https://www.npmjs.com/package/nuxt-primevue) package is the official module by PrimeTek.
 
-**nuxt.config.js**
+```
+# Using npm
+npm install --save-dev nuxt-primevue
 
-Open the nuxt configuration file and add the css dependencies.
+# Using yarn
+yarn add --dev nuxt-primevue
+
+# Using pnpm
+pnpm add -D nuxt-primevue
+```
+
+The module is enabled by adding `nuxt-primevue` to the modules option. Configuration values are defined with the `primevue` property.
 
 ```javascript
 export default defineNuxtConfig({
-    css: ['primevue/resources/themes/lara-light-teal/theme.css'],
-    build: {
-        transpile: ['primevue']
+    modules: ['nuxt-primevue'],
+    primevue: {
+        /* Options */
     }
 });
 ```
 
-**primevue.js**
-
-Create a file like **primevue.js** under the plugins directory for the configuration.
+Whether to install the PrimeVue plugin, defaults to true. Disable this option if you prefer to configure PrimeVue manually e.g. with a Nuxt plugin.
 
 ```javascript
-import { defineNuxtPlugin } from '#app';
-import PrimeVue from 'primevue/config';
-import Button from 'primevue/button';
-
-export default defineNuxtPlugin((nuxtApp) => {
-    nuxtApp.vueApp.use(PrimeVue, { ripple: true });
-    nuxtApp.vueApp.component('Button', Button);
-    //other components that you need
-});
+primevue: {
+    usePrimeVue: true;
+}
 ```
 
+The names of the components, directives and composables to import and register are provided using the include property. When the value is ignored or set using the \* alias, all of the components, directives and composables are registered respectively.
+
+```javascript
+primevue: {
+    components: {
+        include: ['Button', 'DataTable']
+    },
+    directives: {
+        include: ['Ripple', 'Tooltip']
+    },
+    composables: {
+        include: ['useStyle']
+    }
+}
+```
+
+For detailed [information](https://primevue.org/nuxt)
+
 ## Example
 
 We've created various samples for the popular options in the Vue ecosystem. Visit the [primevue-examples](https://github.com/primefaces/primevue-examples) repository for the samples.
@@ -126,7 +148,7 @@ We've created various samples for the popular options in the Vue ecosystem. Visi
 
 ### Nuxt
 
-<a href="https://github.com/primefaces/primevue-examples/tree/main/nuxt3-quickstart">
+<a href="https://github.com/primefaces/primevue-examples/tree/main/nuxt-quickstart">
   <img src="https://primefaces.org/cdn/primevue/images/logos/nuxt.svg" alt="nuxt" width="112" height="112">
 </a>