How to Install
To use vavilon.js
on your website you should connect the script in your
webpage's <head>
. Here are some ways to get this going:
via CDN (recommended)
You can get vavilon.js
via jsDelivr. This is the fastest and the most reliable
way:
via NPM
If you use NPM with your static website, you can install vavilon.js
using npm:
npm install vavilon
Then you can include the script in your webpage like so:
Manual download
You can find latest version of vavilon.js
in Releases
section on GitHub. Download either the minified or the uncompressed version and
include it in your document:
How to use
-
Create your HTML page on open the one you've already created. Set the
lang
attribute in your<html>
tag:Hello World!How are you?If you rely on multiple versions of the same language (like US and UK English), you can user the country-specific lang codes (i.e.
en-us
,en-uk
) -
Give unique IDs to every string on your HTML page that you want to have translated. Put the IDs inside the
data-vavilon
attribute and add thevavilon
class to these elements:Hello World!How are you? -
Create JSON dictionary files for the languages you want to support. Each file should be an object, with the keys being the unique string IDs and values being the translated strings. Here's an example for Russian language:
-
Connect the dictionaries inside
<head>
element. Add thedata-vavilon-dict
attribute to specify the dictionaries language: -
Download and connect the latest version of
vavilon.js
. Upon doing so, your page now will automatically change its language based on the end user's browser locale. -
If you want your user to be able to switch languages, you can set it up by using the
setLang
function:English version
Caveats
As you may have guessed from the major version number being 0, the library is not completely finished. Here are some things that are not supported or don't work as expected:
Styling and inline tags
Right now vavilon.js
replaces the text of the elements, not their HTML code,
which means that the code like
Hello world!
will not have the word "world" written in bold.
The support for styling your strings will come in future releases. If this is crucial for you, you can use a workaround like this:
Hello world!
This way you can define separate IDs for the words "Hello" and "world" inside your dictionary file.
Framework compatibility
While it is possible to create static websites using frameworks like Vue.js,
React and Svelte, the support for those has not been tested at all. If you use
these frameworks I would highly recommend you use something other than vavilon.js
,
like the i18n plugins created specifically for these frameworks.
With regard to jQuery, it has not been tested yet either, but I guess it should
work just fine. If you want to play around with vavilon.js
and jQuery, I
encourage you do so.
If you encounter any bugs, don't hesitate filing an issue