Can I use Weglot with a Single Page Application (SPA)?
In this article, you'll learn how to use Weglot on your website if you're using an SPA (Single Page Application).
Note: This feature is not currently available on WordPress websites.
If your website is built with WordPress and uses a Single-Page Application, please email support@weglot.com for assistance.
What is a Single Page Application?
A Single Page Application (SPA) is a web application that dynamically updates content without fully reloading the page. Popular frameworks for SPAs include React, Angular, and Vue.js. Because content in SPAs is often loaded dynamically after the initial page load, it may not be present in the original HTML source code. This can affect how Weglot detects and translates the content. To ensure proper translation, Weglot needs to simulate a page refresh whenever content updates dynamically.
How to translate your SPA with Weglot?
To correctly display translations on your SPA, follow these steps:
- Open your Weglot Dashboard.
- Go to the Settings tab, then navigate to App Settings.
- Click the "Add Dynamic" button.
- Add the selector
"body"to enable Weglot to re-scan the page when content changes.
- Click "Save".
After setting this up:
- Perform a hard refresh of your website.
- Test the translated version in an incognito window to confirm everything works as expected.
Hard refresh shortcuts:
- Mac:
Cmd + Shift + R - Windows:
Ctrl + F5
Have any feedback on this article? Let us know!