DEV Community

Discussion on: Help: How to make a multilanguage website?

Collapse
squidbe profile image
squidbe • Edited on

Je suis Français aussi (Cajun, en fait).

Easiest way to persist the preference would be local storage or a cookie. When the user selects the language preference, you just point to the relevant dictionary object (could be a file or you could just load the object into memory on page load depending on how much text there is).

You mentioned you might duplicate pages in the different languages, but you can just use tokens to reference the text (e.g., {{ myPage.title }} -- see Avalander's post), and dynamically swap the text upon user selection without page requests. If you load the dictionaries when the user first hits the site, you won't need to make subsequent requests, and the UX will be very snappy. However, if you're really gonna go with vanilla JS, then using tokens will likely be more work than it's worth (a framework like Vue gives you that functionality out of the box); in that case, just use innerHTML or innerText on id-targeted elements, e.g., <div id="biography"><!-- your script inserts language-specific biography text here --></div>. Good luck!