Getting Started

Try Vay in the Browser

You can try out Vay in the browser without ever opening your editor on StackBlitz.

Installation

You can install Vay using your favourite package manager. Vay provides commonjs as well as esm exports to achieve compatibility with all node setups.

yarn

# Install Vay via yarn add
$ yarn add @vayjs/vay

npm

# Install Vay via npm install
$ npm install @vayjs/vay

pnpm

# Install Vay via pnpm add
$ pnpm add @vayjs/vay

bun

# Install Vay using bun add
$ bun add @vayjs/vay

INFO

You can also use Vay using the unpkg CDN directly in the browser when not using a bundler. See the Translating Static Pages with Vay recipe for more information.

The VayProvider

To translate a token and retrieve the corresponding phrase, you need to create a VayProvider using the createProvider function. The function requires a config object and at least one dictionary.

All examples in the documentation will be utilising TypeScript and ESM inside the example code blocks.

src/i18n.provider.ts

import { createProvider, defineConfig, defineDictionary } from '@vayjs/vay';

// Create the i18n provider
const i18n = createProvider(
    // Create the Vay config
    defineConfig({ defaultLocale: 'en' }),
    // Pass your dictionaries to the instance. You can pass as
    // many dictionaries as you like.
    defineDictionary('en', {
        token: 'Phrase',
    }),
    defineDictionary('es', {
        token: 'Expresión',
    }),
);

// Use the created provider
console.log(i18n.translate('token')); // Outputs 'Phrase'

// Set a different language
i18n.setLanguage('es');

// Get the current language
console.log(i18n.getLanguage()); // Outputs 'es'

TIP

Read more about tokens, phrases and dictionaries in the dictionaries section. To learn more about how to configure Vay, take a look at the configuration section.

What's Next?

Great job on getting Vay.js up and running! Let's keep the momentum going. Here are a few suggestions to take your project's i18n capabilities further:

• Enhance Your Dictionaries: Dive into the Dictionaries guide. Learn to craft dictionaries that grow with your project and support complex translation scenarios.

• Explore Configuration: Customize Vay.js to fit your needs. Our Configuration page offers insights into fine-tuning your setup, such as adjusting the default locale or tweaking interpolation settings.

• Try out Interpolation: Dynamic data in your translations can make a world of difference. Check out how to dynamically insert data into your translations for more personalized content.