---
layout: tutorial
title: Create app
description: Create a Nuxt app project and integrate with Appwrite
step: 2
---

## Create Nuxt project

Create a Nuxt app with the `npx init` command.
The command will install all the necessary dependencies for you.

```sh
npx nuxi@latest init ideas-tracker
```

## Add dependencies

Once the project is created, change your current working directory and install the JavaScript Appwrite SDK.

```sh
cd ideas-tracker
npm install appwrite
npm install "@appwrite.io/pink"
```

Open `App.vue` and import the relevant style files.

```html
<!-- app.vue -->

<script setup>

import "@appwrite.io/pink";
// optionally, add icons
import "@appwrite.io/pink-icons";

</script>
```

Then update `nuxt.config.ts` to disable SSR for now. SSR support is coming soon to Appwrite, for now, disable SSR.

```ts
// nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  ssr: false,
  devtools: { enabled: true }
})
```

You can start the development server to watch your app update in the browser as you make your changes.

```sh
npm run dev
```

## File structure

Nuxt relies on an opiniated directory structure to automate tasks and help organize the codebase.
To take advantage of this we need to add the following directories:
- `/components/` to keep our UI components in one place.
  We will get back to it in [step 5](/docs/tutorials/nuxt/step-5)
- `/composables/`for storing files handling global states and data fetching.
  We will use it in [step 4](/docs/tutorials/nuxt/step-4)
- `/layouts/` to store the page layouts
- `/pages/` for the content pages.

Run the following command to create these folders

```sh
mkdir components composables layouts pages
```

## Add layout

Go to the `layouts/` directory and add the file `default.vue`.
Add the following code for the default layout.
As you see it's nearly empty but it is needed for the automatic routing to work properly.

```html
<!-- layouts/default.vue -->

<template>
  <div>
    <slot />
  </div>
</template>

<script>
export default {
  layout: "default",
};
</script>
```

## Add home page

Next, head over to the `pages` directory.
This is where we will keep the content that will render on our pages in the web application.
Nuxt reads all the `.vue` files inside this directory and [automatically renders them as routes](https://v2.nuxt.com/docs/directory-structure/pages/).
Add the file `index.vue` with the following code.

```vue
<!-- pages/index.vue -->

<template>
  <nav class="main-header u-padding-inline-end-0">
    <h3 class="u-stretch eyebrow-heading-1">Hello, Idea Tracker!</h3>
  </nav>
</template>
```

This is what your directory should look like after adding the new directories and files:

```
[repository tree]
├── .nuxt/
├── components/
├── composables/
├── layouts/
│   └── default.vue
├── pages/
│   ├── index.vue
├── public/
│   └── /favicon.ico
├── server/
│   └── /tsconfig.json
├── .gitignore
├── app.vue
├── nuxt.config.ts
├── package-lock.json
├── package.json
├── README.md
└── tsconfig.json
```

## Render page

If you run the development server now, it will still render the Nuxt Welcome page.
We need to tell our app to use the files we just created instead.
Open `app.vue` in the root directory and replace the content with the following code.
Your page will now be up and running.

```vue
<!-- app.vue -->

<script setup>
import "@appwrite.io/pink";
import "@appwrite.io/pink-icons";
</script>

<template>
  <div>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>
```