---
title: "Vue, Svelte, and Solid"
description: "Set up the public Linguana SDK in React, Vue, Svelte, or Solid."
canonical_url: "https://docs.linguana.dev/docs/getting-started/frameworks"
markdown_url: "https://docs.linguana.dev/docs/getting-started/frameworks.md"
x_farming_labs_generated_preamble: true
---

# Vue, Svelte, and Solid
URL: /docs/getting-started/frameworks
LLM index: /llms.txt
Description: Set up the public Linguana SDK in React, Vue, Svelte, or Solid.

# Vue, Svelte, and Solid

For the public `0.1.0` SDK, configure Vite scripts with `--configLoader runner` as shown in [Install Linguana](/docs/getting-started/install). This lets Node load the packages’ TypeScript source.

Install the packages for your framework using [Install Linguana](/docs/getting-started/install), 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](/docs/getting-started/install) or the [TanStack Start setup](/docs/getting-started/tanstack-start) for request-specific locale state and hydration.

## Vue

```ts title="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:

```ts title="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

```ts title="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:

```svelte title="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 />
```

```svelte title="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

```ts title="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`:

```tsx title="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](/docs/getting-started/connect-your-app) and [Show translated content](/docs/build-with-code/show-translated-content).

## Sitemap

See the full [sitemap](/sitemap.md) for all pages.
Docs-scoped sitemap: [/docs/sitemap.md](/docs/sitemap.md).
Well-known sitemap: [/.well-known/sitemap.md](/.well-known/sitemap.md).