Getting Started

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


First you need to install t18s as a dev dependency.


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.


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

export default defineConfig({
  plugins: [
      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.


hello: Hello World

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


	import * as t from "$t18s/messages";


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:


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


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.