t18s T18S

Getting Started

T18S is still in early development. Expect breaking changes and a lot of new features.

Installation

First you need to install t18s as a dev dependency.

Installation

npm install --save-dev t18s

T18S isn’t just a library, it’s a vite-plugin, so you will need to register it in your vite config.

vite.config.js

import { sveltekit } from "@sveltejs/kit/vite";
import { t18s } from "t18s";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    sveltekit(),
    t18s({
      locales: ["en", "de"],
      fallbackLocale: "en",
    }),
  ],
});

You will need to at least one option in the plugin options; The list of locales that you want to support. Additionally you may use a fallback locale that will be used if a message is missing in the current locale.

Adding messages

Create a folder translations in your src folder. This is the default location in which t18s will look for messages. Then create a file called en.yaml there.

src/translations/en.yaml

hello: Hello World

Now in your svelte component you import the message and use it in your markup.

src/App.svelte

<script>
	import * as t from "$t18s/messages";
</script>

<h1>{t.hello()}</h1>

T18S uses message-imports instead of a global $t function to allow for tree-shaking unused messages. All messages can be individually treeshaken.

Message Domains

You can split your messages into domains, making organization much easier. Name your files: <namespace>.<locale>.yaml and import them like this:

src/App.svelte

<script>
	import * as t from "$t18s/messages/<namespace>";
</script>

<h1>{t.my_message()}</h1>

Domains are loaded & bundled independently, so if you only need a message on some pages, putting it in a separate domain will allow you to only load it on those pages.