Build an ideas tracker with Nuxt

Create Nuxt project

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

npx nuxi@latest init ideas-tracker

Add dependencies

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

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

Open App.vue and import the relevant style files.

<!-- 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.

// 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.

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

• /composables/for storing files handling global states and data fetching. We will use it in step 4

• /layouts/ to store the page layouts

• /pages/ for the content pages.

Run the following command to create these folders

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.

<!-- 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. Add the file index.vue with the following code.

<!-- 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.

<!-- app.vue -->

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

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