> ## Documentation Index
> Fetch the complete documentation index at: https://docs.bijection.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Nuxt Quickstart

> Add Bijection to a Nuxt project

Learn how to query data from Bijection in a Nuxt app.

This quickstart uses the [JavaScript client](/client/javascript/overview)
directly, from a client-only Nuxt plugin. See [Nuxt](/client/vue/nuxt) for
other options.

<Steps>
  <Step title="Install the Bijection CLI">
    ```sh theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
    curl -fsSL https://bijection.com/install.sh | sh
    ```

    See [Install Bijection](/get-started/install) for PATH setup and supported
    platforms.
  </Step>

  <Step title="Create a Nuxt application">
    Create a Nuxt application using the `npm create nuxt@latest my-nuxt-app` command.

    Bijection will work with any of the official modules but to follow this quickstart skip installing them for now.
    This quickstart uses the Nuxt 4 layout, with the application's code in `app/`.

    <br />

    ```sh theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
    npm create nuxt@latest my-nuxt-app
    ```
  </Step>

  <Step title="Add a Bijection backend">
    In the application's directory, run `bijection init`. It adds a
    `bijection/` folder, where you write your backend functions, with a sample
    schema, query and mutation, and `bijection.json`.

    ```sh theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
    cd my-nuxt-app && bijection init
    ```
  </Step>

  <Step title="Add the Bijection SDK to the application">
    The Bijection SDK (`bijection/react`, `bijection/browser`, …) is not published
    to the npm registry. Your app declares it as a tarball from bijection.com, for
    the version of your CLI (`bijection --version` prints it). Add this line to the
    `dependencies` in your app's `package.json`:

    ```json package.json theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
    "bijection": "https://bijection.com/sdk/bijection-0.1.1.tgz"
    ```

    Then install your app's dependencies with its package manager as usual (for
    example `npm install`). The `react-vite` and `nextjs` templates of
    `bijection init` write this line and run the install for you.
  </Step>

  <Step title="Add the Bijection URL">
    Expose the Bijection URL to the browser through your `nuxt.config.ts` file.

    ```ts {4-8} theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
    export default defineNuxtConfig({
      compatibilityDate: '2025-07-15',
      devtools: { enabled: true },
      runtimeConfig: {
        public: {
          bijectionUrl: process.env.BIJECTION_URL,
        },
      },
    })
    ```
  </Step>

  <Step title="Set up a Bijection dev deployment">
    Log this machine in to Bijection, once per machine, then run
    `bijection dev`. The first run creates your dev deployment and saves its URL
    in `.env.local` as `BIJECTION_URL`. The `dev` command then keeps running to
    push your functions in `bijection/` to your dev deployment on every change.

    ```sh theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
    bijection login
    bijection dev
    ```

    <Note>
      Bijection's hosted service is not yet open for public sign-up, and the CLI
      has no default management service. Before running `bijection login`, set
      `BIJECTION_MANAGEMENT_URL` to the management service URL you were given, in
      your shell's startup file so that every later `bijection` command sees it too:

      ```sh theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
      export BIJECTION_MANAGEMENT_URL=https://<your management service>
      ```
    </Note>
  </Step>

  <Step title="Create sample data for your database">
    In a new terminal window, create a `sampleData.jsonl`
    file with some sample data.

    ```json theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
    {"text": "Buy groceries", "isCompleted": true}
    {"text": "Go for a swim", "isCompleted": true}
    {"text": "Integrate Bijection", "isCompleted": false}
    ```
  </Step>

  <Step title="Add the sample data to your database">
    Now that your project is ready, add a `tasks` table
    with the sample data into your Bijection database with
    the `import` command.

    ```sh theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
    bijection import --table tasks sampleData.jsonl
    ```
  </Step>

  <Step title="Declare the tasks table">
    `bijection init` created `bijection/schema.ts`, which declares the tables of
    your database, starting with a sample `messages` table. Add a `tasks` table
    beside it. The schema gives your functions TypeScript types, and Bijection
    enforces it at runtime.

    ```ts bijection/schema.ts theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
    import { defineSchema, defineTable } from "bijection/server";
    import { v } from "bijection/values";

    export default defineSchema({
      messages: defineTable({
        author: v.string(),
        body: v.string(),
      }),
      tasks: defineTable({
        text: v.string(),
        isCompleted: v.boolean(),
      }),
    });
    ```
  </Step>

  <Step title="Expose a database query">
    Add a new file `tasks.ts` in the `bijection/` folder
    with a query function that loads the data.

    Exporting a query function from this file
    declares an API function named after the file
    and the export name, `api.tasks.get`.

    ```ts theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
    import { query } from "./_generated/server";

    export const get = query({
      args: {},
      handler: async (ctx) => {
        return await ctx.db.query("tasks").collect();
      },
    });
    ```
  </Step>

  <Step title="Create the Bijection client">
    In a new file `app/plugins/bijection.client.ts`, create one
    `BijectionClient` for your deployment and provide it to the application.
    The `.client` suffix runs the plugin only in the browser, where the client
    keeps its connection open.

    ```ts app/plugins/bijection.client.ts theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
    import { BijectionClient } from "bijection/browser";

    export default defineNuxtPlugin(() => {
      const url = useRuntimeConfig().public.bijectionUrl as string;
      return { provide: { bijection: new BijectionClient(url) } };
    });
    ```
  </Step>

  <Step title="Display the data in your app">
    In `app/app.vue`, subscribe to your `api.tasks.get` API function with
    `onUpdate` once the component is mounted in the browser. The callback runs
    with the first result and again whenever the tasks change.

    ```vue app/app.vue theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
    <script setup lang="ts">
    import type { FunctionReturnType } from "bijection/server";
    import { api } from "../bijection/_generated/api";

    const tasks = ref<FunctionReturnType<typeof api.tasks.get>>();
    const { $bijection } = useNuxtApp();
    let unsubscribe: (() => void) | undefined;
    onMounted(() => {
      unsubscribe = $bijection.onUpdate(api.tasks.get, {}, (result) => {
        tasks.value = result;
      });
    });
    onUnmounted(() => unsubscribe?.());
    </script>

    <template>
      <div>
        <h1>Tasks</h1>
        <ul>
          <li v-for="task in tasks" :key="task._id">
            <span>{{ task.text }}</span>
          </li>
        </ul>
      </div>
    </template>
    ```
  </Step>

  <Step title="Update script to start development server">
    By default, Bijection stores environment variables in `.env.local`, and Nuxt
    looks for environment variables in `.env`.

    To use the default `npm run dev` command,
    update your `package.json` to use the `--dotenv .env.local` flag.

    ```json {7} theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
    {
      "name": "nuxt-app",
      "private": true,
      "type": "module",
      "scripts": {
        "build": "nuxt build",
        "dev": "nuxt dev --dotenv .env.local",
        "generate": "nuxt generate",
        "preview": "nuxt preview",
        "postinstall": "nuxt prepare"
      },
      "dependencies": {
        "bijection": "https://bijection.com/sdk/bijection-0.1.1.tgz",
        "nuxt": "^4.1.2",
        "vue": "^3.5.21",
        "vue-router": "^4.5.1"
      }
    }
    ```
  </Step>

  <Step title="Start the app">
    Start the app, open [http://localhost:3000](http://localhost:3000) in a browser,
    and see the list of tasks.

    ```sh theme={"theme":{"light":"github-light-default","dark":"github-dark-default"}}
    npm run dev
    ```
  </Step>
</Steps>

See the [JavaScript client](/client/javascript/overview) for mutations,
actions and the rest of `BijectionClient`.