Kinco
@kinco
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:
0 reply
1 recast
2 reactions
Kinco
@kinco
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
0 reply
0 recast
3 reactions
Kinco
@kinco
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
0 reply
0 recast
2 reactions
Kinco
@kinco
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)
0 reply
0 recast
1 reaction
Kinco
@kinco
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!
0 reply
0 recast
1 reaction
Kinco
@kinco
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.
0 reply
0 recast
1 reaction
Kinco
@kinco
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
0 reply
0 recast
1 reaction
Kinco
@kinco
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.
0 reply
0 recast
1 reaction