---
layout: article
title: Start with Nuxt
description: Build Nuxt.js apps with Appwrite and learn how to use our powerful backend to add authentication, user management, file storage, and more.
difficulty: beginner
readtime: 3
back: /docs/quick-starts
---

Learn how to setup your first Nuxt project powered by Appwrite.

## 1. Create project

Head to the [Appwrite Console](https://cloud.appwrite.io/console).

![Create project screen](/images/docs/quick-starts/create-project.avif)

If this is your first time using Appwrite, create an account and create your first project.

Then, under **Add a platform**, add a **Web app**. The **Hostname** should be `localhost`.

**Cross-Origin Resource Sharing (CORS)**

Adding `localhost` as a platform lets your local app talk to Appwrite. For production, add your live domain to avoid CORS errors.

Learn more in our [CORS error guide](/blog/post/cors-error).

![Add a platform](/images/docs/quick-starts/add-platform.avif)

You can skip optional steps.

## 2. Create Nuxt project

Create a Nuxt project.

```sh
npx nuxi@latest init my-app && cd my app

```

## 3. Install Appwrite

Install the JavaScript Appwrite SDK.

```sh
npm install appwrite
```

## 4. Import Appwrite

Find your project's ID in the **Settings** page.

![Project settings screen](/images/docs/quick-starts/project-id.avif)

Create a new file `utils/appwrite.js` and add the following code to it, replace `<PROJECT_ID>` with your project ID.

```client-web
import { Client, Account} from 'appwrite';

export const client = new Client();

client
    .setEndpoint('https://<REGION>.cloud.appwrite.io/v1')
    .setProject('<PROJECT_ID>'); // Replace with your project ID

export const account = new Account(client);
export { ID } from 'appwrite';
```

## 5. Create a login page

Add the following code to `app.vue`.

```html
<script setup>
import { ref } from 'vue';
import { account, ID } from './utils/appwrite.js';

const loggedInUser = ref(null);
const email = ref('');
const password = ref('');
const name = ref('');

const login = async (email, password) => {
  await account.createEmailPasswordSession({
    email,
    password
  });
  loggedInUser.value = await account.get();
};

const register = async () => {
  await account.create({
    userId: ID.unique(),
    email: email.value,
    password: password.value,
    name: name.value
  });
  login(email.value, password.value);
};

const logout = async () => {
  await account.deleteSession({ sessionId: 'current' });
  loggedInUser.value = null;
};
</script>

<template>
  <div>
    <p>
      {{ loggedInUser ? `Logged in as ${loggedInUser.name}` : 'Not logged in' }}
    </p>

    <form>
      <input type="email" placeholder="Email" v-model="email" />
      <input type="password" placeholder="Password" v-model="password" />
      <input type="text" placeholder="Name" v-model="name" />
      <button type="button" @click="login(email, password)">Login</button>
      <button type="button" @click="register">
        Register
      </button>
      <button type="button" @click="logout">
        Logout
      </button>
    </form>
  </div>
</template>
```

## 6. All set

Run your project with `npm run dev -- --open --port 3000` and open [Localhost on Port 3000](http://localhost:3000) in your browser.