---
title: "Install Linguana"
description: "Install the public npm SDK for React, Vue, Svelte, or Solid and run your first local build."
canonical_url: "https://docs.linguana.dev/docs/getting-started/install"
markdown_url: "https://docs.linguana.dev/docs/getting-started/install.md"
x_farming_labs_generated_preamble: true
---

# Install Linguana
URL: /docs/getting-started/install
LLM index: /llms.txt
Description: Install the public npm SDK for React, Vue, Svelte, or Solid and run your first local build.

# Install Linguana

Install Linguana, connect it to your build, and extract your first messages. Local setup works without an account or token.

## Requirements

Use an existing Vite application and its framework plugin. The published `0.1.0` packages support:

| Application | Framework requirement | Runtime | Build adapter import |
| --- | --- | --- | --- |
| React / TanStack Start | React and React DOM 19+ | `@linguanahq/react` | `@linguanahq/vite/react` |
| Vue | Vue 3.5+ | `@linguanahq/vue` | `@linguanahq/vite/vue` |
| Svelte | Svelte 5+ | `@linguanahq/svelte` | `@linguanahq/vite/svelte` |
| Solid | Solid 1.9+ | `@linguanahq/solid` | `@linguanahq/vite/solid` |

The shared plugin supports Vite `>=7 <9`. Use a Node.js version supported by your Vite release. Keep the Linguana runtime and Vite plugin on matching release versions and commit your package manager's lockfile.

## 1. Install your framework's packages

Choose one framework. These commands assume its framework and official Vite plugin are already installed.

<Tabs items={["React / TanStack Start", "Vue", "Svelte", "Solid"]}>
<Tab value="React / TanStack Start">

```bash title="Bun"
bun add @linguanahq/react @linguanahq/catalog
bun add --dev @linguanahq/vite
```

</Tab>
<Tab value="Vue">

```bash title="Bun"
bun add @linguanahq/vue @linguanahq/catalog
bun add --dev @linguanahq/vite @vue/compiler-dom @vue/compiler-sfc
```

Keep `@vue/compiler-dom` and `@vue/compiler-sfc` versions aligned with Vue.

</Tab>
<Tab value="Svelte">

```bash title="Bun"
bun add @linguanahq/svelte @linguanahq/catalog
bun add --dev @linguanahq/vite
```

The Svelte adapter uses your installed Svelte compiler.

</Tab>
<Tab value="Solid">

```bash title="Bun"
bun add @linguanahq/solid @linguanahq/catalog
bun add --dev @linguanahq/vite
```

</Tab>
</Tabs>

`@linguanahq/vite/react` and the other adapter paths are imports from `@linguanahq/vite`, not separate packages to install. `@linguanahq/catalog` is needed directly when you import `createCatalog`. The core, compiler, and build-core packages are installed transitively for normal framework integrations.

## 2. Configure the config loader

The `0.1.0` packages publish TypeScript source. When running Vite with Node.js, use its module runner to load the config and SDK imports:

```json title="package.json — merge into your existing scripts"
{
  "scripts": {
    "dev": "vite --configLoader runner",
    "build": "vite build --configLoader runner",
    "preview": "vite preview --configLoader runner"
  }
}
```

Preserve any existing type-check step in your build script and append `--configLoader runner` to its Vite command. This also works when invoking the scripts through `bun run`; installing with Bun alone does not force Vite to run under Bun.

If you see `ERR_UNSUPPORTED_NODE_MODULES_TYPE_STRIPPING`, check this setting before changing application code.

## 3. Add the build plugin

The example below uses React. For Vue, Svelte, or Solid, use the [framework-specific plugin and runtime](/docs/getting-started/frameworks), then return to step 5. For server-rendered React, follow [TanStack Start](/docs/getting-started/tanstack-start).

Add the Linguana plugin before the React plugin:

```ts title="vite.config.ts"
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { linguana } from "@linguanahq/vite";
import { react as linguanaReact } from "@linguanahq/vite/react";

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

`my-app` is a local identifier for this extraction-only example. Replace it consistently in the plugin and runtime with your real project ID before connecting to the API. See [framework setup](/docs/getting-started/frameworks) for Vue, Svelte, and Solid, or [TanStack Start](/docs/getting-started/tanstack-start) for SSR.

## 4. Add the runtime

The transformed application needs its framework runtime. For React, wrap the app once:

```tsx title="src/main.tsx"
import { createRoot } from "react-dom/client";
import { LocaleProvider } from "@linguanahq/react";
import { App } from "./app";

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

Use your application's existing `App` import and root element. The compiler keeps source text as fallback, so you can check extraction before any translations exist. For explicit catalogs and locale switching, continue with [Show translated content](/docs/build-with-code/show-translated-content).

## 5. Build your app

```bash title="terminal"
bun run build
```

Confirm `.linguana/manifest.json` contains messages from your application, run your app, and check that its source-language text still renders. No upload occurs with `upload: false`.

## Next

Your app now extracts text and renders its original language. Continue with [Connect hosted translations](/docs/getting-started/connect-your-app) to upload text and publish your first language.

For text with variables or links, see [Dynamic text and links](/docs/build-with-code/dynamic-text-and-links). If the build fails, see [Build diagnostics](/docs/troubleshooting/build-diagnostics).

## 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).