From 13924428ed3e93e149bdc18adb5317d25cae85a4 Mon Sep 17 00:00:00 2001
From: Adam Carpenter <adamcarpenter86@gmail.com>
Date: Mon, 15 Jul 2024 12:58:09 -0600
Subject: [PATCH] Update docs for gnosis/safe package for building within vue
 env (#2257)

* Update docs for gnosis/safe package for building within vue env

* Add clarity and remoinder for peerDeps
---
 .../docs/[...3]modules/[...1]core/+page.md    |  5 ++++-
 .../docs/[...3]modules/[...7]vue/+page.md     |  3 +++
 .../docs/[...4]wallets/[...12]gnosis/+page.md | 18 ++++++++++++++++++
 packages/core/README.md                       |  4 +++-
 packages/gnosis/README.md                     | 19 +++++++++++++++++++
 packages/gnosis/package.json                  |  2 +-
 6 files changed, 48 insertions(+), 3 deletions(-)

diff --git a/docs/src/routes/docs/[...3]modules/[...1]core/+page.md b/docs/src/routes/docs/[...3]modules/[...1]core/+page.md
index e6ee59706..72ea627bf 100644
--- a/docs/src/routes/docs/[...3]modules/[...1]core/+page.md
+++ b/docs/src/routes/docs/[...3]modules/[...1]core/+page.md
@@ -441,6 +441,7 @@ const sendTransaction = async () => {
   console.log(result)
 }
 ```
+
 ---
 
 #### disableFontDownload
@@ -1902,7 +1903,9 @@ export default {
       '@web3-onboard/gas',
       '@web3-onboard/sequence',
       'js-sha3',
-      '@ethersproject/bignumber'
+      '@ethersproject/bignumber',
+      '@safe-global/safe-apps-sdk',
+      '@safe-global/safe-apps-provider'
     ],
     esbuildOptions: {
       // Node.js global to browser globalThis
diff --git a/docs/src/routes/docs/[...3]modules/[...7]vue/+page.md b/docs/src/routes/docs/[...3]modules/[...7]vue/+page.md
index df335698a..50c9b85d8 100644
--- a/docs/src/routes/docs/[...3]modules/[...7]vue/+page.md
+++ b/docs/src/routes/docs/[...3]modules/[...7]vue/+page.md
@@ -503,6 +503,9 @@ export default {
     commonjsOptions: {
       transformMixedEsModules: true
     }
+  },
+  optimizeDeps: {
+    include: ['@safe-global/safe-apps-sdk', '@safe-global/safe-apps-provider']
   }
 }
 ```
diff --git a/docs/src/routes/docs/[...4]wallets/[...12]gnosis/+page.md b/docs/src/routes/docs/[...4]wallets/[...12]gnosis/+page.md
index 81d9c083f..e8c124ba4 100644
--- a/docs/src/routes/docs/[...4]wallets/[...12]gnosis/+page.md
+++ b/docs/src/routes/docs/[...4]wallets/[...12]gnosis/+page.md
@@ -80,3 +80,21 @@ Note: With the `safeTxGas` you will see additional value on the `gasLimit` displ
 ## Build Environments
 
 For build env configurations and setups please see the Build Env section [here](/docs/modules/core#build-environments)
+
+## Vue Build Configuration
+
+If using Vue be sure to include the necessary peerDeps in the `vite.config.ts` specifically within the `optimizeDeps.include` list and install the necessary peer deps `npm i @safe-global/safe-apps-provider @safe-global/safe-apps-sdk`.
+
+```typescript
+export default defineConfig({
+  plugins: [vue(), vueJsx(), VueDevTools()],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  },
+  optimizeDeps: {
+    include: ['@safe-global/safe-apps-sdk', '@safe-global/safe-apps-provider']
+  }
+})
+```
\ No newline at end of file
diff --git a/packages/core/README.md b/packages/core/README.md
index ebaaa4b5d..d6a0b299a 100644
--- a/packages/core/README.md
+++ b/packages/core/README.md
@@ -1670,7 +1670,9 @@ const config: UserConfig = {
       '@web3-onboard/gas',
       '@web3-onboard/sequence',
       'js-sha3',
-      '@ethersproject/bignumber'
+      '@ethersproject/bignumber',
+      '@safe-global/safe-apps-sdk',
+      '@safe-global/safe-apps-provider'
     ],
     esbuildOptions: {
       // Node.js global to browser globalThis
diff --git a/packages/gnosis/README.md b/packages/gnosis/README.md
index 435b7768f..ebd5e430b 100644
--- a/packages/gnosis/README.md
+++ b/packages/gnosis/README.md
@@ -57,3 +57,22 @@ let trans = await wallet.instance.txs.send({txs:[tx], params})
 ```
 
 Note: With the `safeTxGas` you will see additional value on the `gasLimit` displayed in the Safe. Check [Safe docs](https://github.com/safe-global/safe-contracts/blob/a6504a9afdeac186a8cdb29ad68b189523c80eda/docs/safe_tx_gas.md) for full details on that computation.
+
+
+## Vue Build Configuration
+
+If using Vue be sure to include the necessary peerDeps in the `vite.config.ts` specifically within the `optimizeDeps.include` list and install the necessary peer deps `npm i @safe-global/safe-apps-provider @safe-global/safe-apps-sdk`.
+
+```typescript
+export default defineConfig({
+  plugins: [vue(), vueJsx(), VueDevTools()],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  },
+  optimizeDeps: {
+    include: ['@safe-global/safe-apps-sdk', '@safe-global/safe-apps-provider']
+  }
+})
+```
\ No newline at end of file
diff --git a/packages/gnosis/package.json b/packages/gnosis/package.json
index 9fd40516e..2dd5ff6bb 100644
--- a/packages/gnosis/package.json
+++ b/packages/gnosis/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/gnosis",
-  "version": "2.3.1",
+  "version": "2.3.2-alpha.1",
   "description": "Safe module for connecting to Web3-Onboard. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.",
   "keywords": [
     "Ethereum",