From 309fd7f647454b3f65734efd9c9ca5f4dfe07392 Mon Sep 17 00:00:00 2001
From: nftchance <chance@utc24.io>
Date: Sat, 31 Aug 2024 16:08:55 -0500
Subject: [PATCH] chore: integrations client side only

---
 introduction/integrations.md | 31 +++++++++++++++++++------------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/introduction/integrations.md b/introduction/integrations.md
index 96c8d7e..318bd7e 100644
--- a/introduction/integrations.md
+++ b/introduction/integrations.md
@@ -53,6 +53,9 @@ head:
 </style>
 
 <script setup>
+    import { defineClientComponent } from 'vitepress'
+    const ClientOnly = defineClientComponent(() => import('vitepress/client'))
+
     const protocolList = ['aave','aerodrome','alchemix','balancer','chainlink','compound','convex','curve','eigen-layer','ens','ethena','frax-lend','gearbox','hop','lido','maker','nouns','paraswap','rocket-pool','sushiswap','synthetix','uniswap','wasabi','yearn','zora']
 
     const bigList = ["ens"]
@@ -83,22 +86,26 @@ head:
 
 With support for all the major Ethereum based chains you can use your money wherever. Plug can easily be deployed on any Ethereum based blockchain.
 
-<div className="integrations">
-    <div v-for="item in chainList" :key="item" className="integration">
-        <img :src="toChainImagePath(item)" :alt="toTitleCase(item)">
-        <p>{{ toTitleCase(item) }}</p>
-        <p>Coming Soon</p>
+<ClientOnly>
+    <div className="integrations">
+        <div v-for="item in chainList" :key="item" className="integration">
+            <img :src="toChainImagePath(item)" :alt="toTitleCase(item)">
+            <p>{{ toTitleCase(item) }}</p>
+            <p>Coming Soon</p>
+        </div>
     </div>
-</div>
+</ClientOnly>
 
 ## Protocols
 
 Plug is a generalized framework and protocol that builds on top of existing protocols: it essentially integrates with everything in the Ethereum ecosystem. If you'd like Plug to integrate a protocol, please [reach out](https://twitter.com/onplug_io).
 
-<div className="integrations">
-    <div v-for="item in protocolList" :key="item" className="integration">
-        <img :src="toProtocolImagePath(item)" :alt="toTitleCase(item)">
-        <p>{{ toTitleCase(item) }}</p>
-        <p>Coming Soon</p>
+<ClientOnly>
+    <div className="integrations">
+        <div v-for="item in protocolList" :key="item" className="integration">
+            <img :src="toProtocolImagePath(item)" :alt="toTitleCase(item)">
+            <p>{{ toTitleCase(item) }}</p>
+            <p>Coming Soon</p>
+        </div>
     </div>
-</div>
+</ClientOnly>