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

# Nuxt

> Integrate Nile Auth with Nuxt applications

This guide will help you get started with Nile Auth and Nuxt. This guide outlines the steps required to configure and integrate authentication in your application.

<Note>
  If you have not done so yet, be sure you have [obtained credentials from the
  console](../getting-started/installation).
</Note>

<Steps>
  <Step title="Install packages">
    <CodeGroup>
      ```bash npm theme={null}
        npm install @niledatabase/server @niledatabase/nitro @niledatabase/client
      ```

      ```bash yarn theme={null}
        yarn add @niledatabase/server @niledatbase/nitro @niledatabase/client
      ```

      ```bash pnpm theme={null}
        pnpm add @niledatabase/server @niledatabase/nitro @niledatabase/client
      ```
    </CodeGroup>
  </Step>

  <Step title="Configure the extension">
    Create the base nile instance, extended with the nitro plugin

    ```ts app/composables/useNile.ts theme={null}
    import { Nile } from "@niledatabase/server";
    import { nitro } from "@niledatabase/nitro";
    import type { withNitro } from "@niledatabase/nitro";

    export const nile = Nile<withNitro>({
      debug: true,
      extensions: [nitro],
    }));

    ```
  </Step>

  <Step>
    Add the route so that the APIs can be handled `ts server/api/[...slug].ts
          import {nile} from "~/composables/useNile"; export default
          defineEventHandler(nile.handlers); `
  </Step>
</Steps>

## Client side

For requests in Vue, you can do the following

```Vue theme={null}
<template>
<-- Sign in form here -->
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { signUp } from '@niledatabase/client';

const email = ref('')
const password = ref('')
const error = ref<string | null>(null)

const handleSignIn = async () => {

  try {
    const response = await signUp({
      email: email.value,
      password: password.value,
    })

    console.log('Signed in successfully:', response)

    // Optional: redirect, store session, etc.
    // await navigateTo('/dashboard')

  } catch (err: any) {
    error.value = err?.message || 'Sign-in failed'
    console.error('Sign-in error:', err)
  }
}
</script>
```

Not every API call is supported in the client. You may need to call some routes via the framework `useFetch('/api/tenants')`, or `defineEventHandler`

```ts server/api/submit-invite.post.ts theme={null}
export default defineEventHandler(async (event) => {
  const ctxNile = nile.withContext({ headers: event.headers });
  const body = await readBody(event);
  const res = ctxNile.tenants.invite({ email: body.email });
  if (res instanceof Response) {
    return { message: 'An error has occurred' };
  }
  return { message: 'Invite sent' };
});
```