Using Patreon WordPress Plugin to Gate Client-Side Rendered Content (Vue App)

I am currently running a Vue app on a WordPress page and am trying to use the Patreon WordPress plugin to gate the content. However, I’m experiencing some issues when attempting to do so.

The Vue app is embedded in my WordPress page using a custom template, and I’ve set up the Patreon plugin to protect the page. The issue I’m encountering is that the plugin seems to work well with other pages on my site, but not with the ones containing the Vue app. The content on the Vue app pages still appears even when it should be gated.

You can view an example of this issue on my website at the following URL: AI Powered Game Master Dashboard - cros.land

I understand that server-side rendering (SSR) could potentially solve this issue, but I’d like to explore any possible solutions that would allow me to continue using client-side rendering with the Patreon plugin.

Is there a way to modify the plugin or my current setup to properly gate the content within my Vue app without resorting to SSR? Any suggestions or guidance on how to achieve this would be greatly appreciated.

Kenji

If your Vue app is getting the content from WP directly and bypassing the WP filters and hooks applied to the post content in the process, this could happen. the_content filter is what is used to gate the content. If that filter is skipped, then the content wont be gated.

If you are using a custom endpoint or any custom function to get the content, try making sure that the_content filter is applied to it before returning.

1 Like

Thank you! This put me in the right direction. I don’t know much about wordpress development. I learned that adding my app via a shortcode would be the way to go and my content was properly gated. Thank you!

If this app is not an app that already existed before and you dont have to use it, I advise against complicating your setup like that and just using WP directly. You can find pretty nicely done, modern themes (including React ones etc).

As it stands now the shortcode would gate whatever your app was showing there, but if anyone accesses your app directly instead of going through the WP post, it may expose your patron-only content. So that’s one thing you may need to confirm.

I’m not sure how people would be able to access the app directly. I have a shortcode embedded on a page which relies on a specific template loading contents of a dist file. When the page is gated via the wordpress plugin the shortcode isn’t there so I think I’m safe?

If its possible for a user to see the shortcode, then see where that code that is inside the shortcode makes calls and then make calls to that location and get your exposed content, it would be possible.