Quick Start

The fastest way to add multiple languages to your Vue, Nuxt, React, or Next.js app

Why Stringer?

Want to add more languages to your Vue, Nuxt, React, or Next.js app? This is normally a complex, time-consuming task. Stringer is the simplest way to do it. It automates the entire process, so you don't need to know anything about localization or i18n. Stop the headaches and start growing your audience.

Step 1: Install Stringer CLI

View on

Step 2: Commit Your Changes

Step 3: Run Stringer

In your terminal, navigate to your project's root folder and run the stringer command:

stringer

Step 4: Start the Convert Flow

Start the convert flow and follow the prompts. You'll see Stringer magically find all the user-facing text in your app and prepare it for translation.

Step 5: Choose Your Languages

When the conversion is complete, just choose the languages you want to add.

Step 6: Add the LangSwitcher Component

Next, use the "Add LangSwitcher component" option in the CLI. This will add the language switching component directly into your project for you.

Step 7: Use the Component

Now you can use the <LangSwitcher /> component anywhere in your app to let users select their preferred language.

<template>
  <LangSwitcher />
</template>

Step 8: Add URL-based Routing (Optional)

For better SEO, select the "Add URL-based i18n routing (experimental)" feature. This will add the language code to your URLs (like /en-us/ or /ko-kr/).

Troubleshooting URL-based Routing

How Much Does It Cost?

Free to Try

Every new user gets 5,000 free credits for conversion and translation. Try it out completely risk-free.

Pay As You Go

When you're ready for more, simply pay as you go. No subscriptions, ever!

Next Steps

Introduction
Introduction