docs

Vue, Svelte, and Solid

For the public 0.1.0 SDK, configure Vite scripts with --configLoader runner as shown in Install Linguana. This lets Node load the packages’ TypeScript source.

Install the packages for your framework using Install Linguana, then configure its adapter and runtime below. These examples use local extraction with upload: false; no account or project token is required. Use the same project ID, source locale, and environment in the plugin and runtime.

React and TanStack Start

Use @linguanahq/react with @linguanahq/vite/react. Follow the complete React installation example or the TanStack Start setup for request-specific locale state and hydration.

Vue

vite.config.ts
import { defineConfig } from "vite";
import { linguana } from "@linguanahq/vite";
import { vue as linguanaVue } from "@linguanahq/vite/vue";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [
    linguana({
      adapter: linguanaVue(),
      projectId: "my-app",
      environment: "development",
      sourceLocale: "en",
      upload: false,
    }),
    vue(),
  ],
});

Install the Vue plugin once on your application:

src/main.ts
import { createApp } from "vue";
import { createLinguana } from "@linguanahq/vue";
import "@linguanahq/vue/styles.css";
import App from "./App.vue";

createApp(App)
  .use(createLinguana({
    projectId: "my-app",
    environment: "development",
    initialLocale: "en",
    fallbackLocale: "en",
  }))
  .mount("#app");

Keep @vue/compiler-dom and @vue/compiler-sfc installed as development dependencies, aligned with your Vue version.

Svelte

vite.config.ts
import { defineConfig } from "vite";
import { linguana } from "@linguanahq/vite";
import { svelte as linguanaSvelte } from "@linguanahq/vite/svelte";
import { svelte } from "@sveltejs/vite-plugin-svelte";

export default defineConfig({
  plugins: [
    linguana({
      adapter: linguanaSvelte(),
      projectId: "my-app",
      environment: "development",
      sourceLocale: "en",
      upload: false,
    }),
    svelte(),
  ],
});

Set context in the root component during initialization, before its child components render:

src/App.svelte
<script lang="ts">
  import { createLinguana, setLinguana } from "@linguanahq/svelte";
  import LanguageSelector from "@linguanahq/svelte/LanguageSelector.svelte";
  import "@linguanahq/svelte/styles.css";
  import Content from "./Content.svelte";

  const { client } = createLinguana({
    projectId: "my-app",
    environment: "development",
    initialLocale: "en",
    fallbackLocale: "en",
  });
  setLinguana(client);
</script>

<Content />
<LanguageSelector />
src/Content.svelte
<h1>Welcome to your application</h1>

Svelte components are exported through subpaths such as @linguanahq/svelte/LanguageSelector.svelte and @linguanahq/svelte/T.svelte. Keep translated content in descendants of the component that initializes the context.

Solid

vite.config.ts
import { defineConfig } from "vite";
import { linguana } from "@linguanahq/vite";
import { solid as linguanaSolid } from "@linguanahq/vite/solid";
import solid from "vite-plugin-solid";

export default defineConfig({
  plugins: [
    linguana({
      adapter: linguanaSolid(),
      projectId: "my-app",
      environment: "development",
      sourceLocale: "en",
      upload: false,
    }),
    solid(),
  ],
});

Wrap the application in LinguanaProvider:

src/main.tsx
import { render } from "solid-js/web";
import { LinguanaProvider } from "@linguanahq/solid";
import "@linguanahq/solid/styles.css";
import App from "./App";

render(
  () => (
    <LinguanaProvider
      projectId="my-app"
      environment="development"
      initialLocale="en"
      fallbackLocale="en"
    >
      <App />
    </LinguanaProvider>
  ),
  document.getElementById("root")!,
);

Verify your integration

Run npm run build or bun run build, check that .linguana/manifest.json includes visible text, and run your application to confirm source-language fallback. The adapter belongs before the framework plugin so Linguana sees the original JSX or template.

The optional @linguanahq/<framework>/styles.css import styles the native language selector. Remove it if you provide your own styles using the data-linguana-* hooks.

Load translated languages

Add an embedded source catalog through the runtime's catalogs option when you have one. For hosted delivery, set catalogEndpoint and publishableKey on the provider or the options passed to createLinguana. Use your real project ID and matching environment. The project token belongs only in the build config; never pass it to a runtime component.

Enable languages and publish catalogs in your project before expecting them to appear in the selector. Continue with Connect hosted translations and Show translated content.

Did this page get you to a working result?

Edit on GitHubllms.txtllms-full.txt

On this page

No Headings