🎱 Bringing excitement and transparency to Gambling
🎲 Luck based games
⚽️ Sports betting
💰 Do not trust the RNG

TIPS: Make a Nuxt.js app Frame-compatible 🪄 

With @betswirl , we have just deployed our dapp on Frame.

Here are 9 tips to help you do the same:

Devs: Frames v2

1) Documentation
- Read documentation about Frames V2: https://docs.farcaster.xyz/developers/frames/v2/

- Join Frames V2 direct cast group: https://warpcast.com/~/group/X2P7HNc4PHTriCssYHNcmQ

2) Manifest
- Generate your manifest on your mobile app ( dot not forget to enable developer mode before)

- Create a static JSON file or use a GET endpoint to generate it dynamically

3) fc:frame metadata
- Add a default fc:frame in app.vue or in your main layout using useHead composable.

- Add more fc:rame on specific pages if needed (to change label button or image for example)

4) Detect if user is in a frame context
- Create a plugin client side to detect if the page has been opened in a Frame context. You will be able to use "frameContext" and "isFrameMode" everywhere in your app now!

5) Start Frame app once SSR is finished
- Use sdk.actions.ready() once your page is mounted if page is in a Frame context. You can place it in app.vue or in your main layout for example.

6) Frame wallet connector
- Copy/paste the connector from npm package https://www.npmjs.com/package/@farcaster/frame-wagmi-connector?activeTab=code in your app.

- Add the connector in Wagmi context only if app detects it is in Frame context

7) Ask the user to add your frame
- When you think it's the moment, ask your user to add your frame app. It will be useful to send them some notifications. On our side, we ask them to add the app once the user connected their wallet.

8) Use local storage instead of cookies
- The cookies we had with expiration dates didn't work well in a Frame context. So we create a composable to manage data easily

- Some devs successfully managed to make it work by creating very specific types of cookies, but I didn't dig any deeper than that because local storage works perfectly in our case.

9) Notifications
- Save in your database the data your receive wia the webhook sent by Frame servers. To avoid to pay a Neynar service to help you to secure your webhook, I suggest you to create a custom checker. You can check what has be done by @horsefacts.eth for that:

9) Notifications
- Save in your database the data your receive wia the webhook sent by Frame servers. To avoid to pay a Neynar service to help you to secure your webhook, I suggest you to create a custom checker. You can check what has be done by @horsefacts.eth for that: https://github.com/horsefacts/yoink-devcon/blob/dbd796d0ff13eb30d5ae34b065eb9287f187e4c4/app/api/webhook/route.ts#L17-L99

WHY IS MY FRAME CACHED?! DEBUG GUIDE

Manifest
- Cached for indefinitely by Warpcast servers, stale after 5 minutes and will be refreshed on next read
- Bust it with Developers > Domains > Check Domain Status

Frame Page
- Cached by end users browser based on cache-control policy
- Bust by clearing browser cache, on mobile launching it from the Developer > Frames will clear WebView cache

Frame Embed metadata hosted on URL
- Cached indefinitely by Warpcast servers as it get's replicated into thousands of feeds
- Bust by resubmitting the URL in the Developers > Frames > Frame Embed

Frame Embed thats been embedded in a Cast 
- Cached indefinitely by Warpcast servers as it get's replicated into thousands of feeds
- No way to bust, cast again

Frame Image
- Cached based on the cache-control header by your browser as well as Warpcast proxy
- Bust it by changing the URL

BONUS) Cache

- Eveytime you update you fc:frame metadata or your manifest, changes could not be taken into account directly. I suggest you to check the cast made by @deodad to help you to refresh your data :

BONUS) Cache

- Eveytime you update you fc:frame metadata or your manifest, changes could not be taken into account directly. I suggest you to check the cast made by @deodad to help you to refresh your data : https://warpcast.com/deodad/0xdc024835

Feel free to DM me if you need help to make your Nuxt.js app compatible! My DMs are always open😀