diff --git a/src/routes/docs/tutorials/nuxt/+layout.svelte b/src/routes/docs/tutorials/nuxt/+layout.svelte
new file mode 100644
index 0000000000..fb9fb3980f
--- /dev/null
+++ b/src/routes/docs/tutorials/nuxt/+layout.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { globToTutorial } from '$lib/utils/tutorials.js';
+	import { setContext } from 'svelte';
+
+	export let data;
+	const tutorials = globToTutorial(data);
+	setContext('tutorials', tutorials);
+</script>
+
+<slot />
diff --git a/src/routes/docs/tutorials/nuxt/+layout.ts b/src/routes/docs/tutorials/nuxt/+layout.ts
new file mode 100644
index 0000000000..c8884f46b8
--- /dev/null
+++ b/src/routes/docs/tutorials/nuxt/+layout.ts
@@ -0,0 +1,11 @@
+import type { LayoutLoad } from './$types';
+
+export const load: LayoutLoad = ({ url }) => {
+    const tutorials = import.meta.glob('./**/*.markdoc', {
+        eager: true
+    });
+    return {
+        tutorials,
+        pathname: url.pathname
+    };
+};
diff --git a/src/routes/docs/tutorials/nuxt/+page.ts b/src/routes/docs/tutorials/nuxt/+page.ts
new file mode 100644
index 0000000000..fa071eee0a
--- /dev/null
+++ b/src/routes/docs/tutorials/nuxt/+page.ts
@@ -0,0 +1,6 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async () => {
+    throw redirect(303, '/docs/tutorials/nuxt/step-1');
+};
diff --git a/src/routes/docs/tutorials/nuxt/step-1/+page.markdoc b/src/routes/docs/tutorials/nuxt/step-1/+page.markdoc
new file mode 100644
index 0000000000..7b0e25069f
--- /dev/null
+++ b/src/routes/docs/tutorials/nuxt/step-1/+page.markdoc
@@ -0,0 +1,35 @@
+---
+layout: tutorial
+title: Build an ideas tracker with Nuxt
+description: Learn to build an idea tracker app with Appwrite and Nuxt with authentication, databases and collections, queries, pagination, and file storage.
+step: 1
+difficulty: beginner
+readtime: 15
+back: /docs
+---
+
+**Idea tracker**: an app to track all the side project ideas that you'll start, but probably never finish.
+In this tutorial, you will build Idea tracker with Appwrite and Nuxt.
+
+{% only_dark %}
+![Create project screen](/images/docs/tutorials/dark/idea-tracker.png)
+{% /only_dark %}
+{% only_light %}
+![Create project screen](/images/docs/tutorials/idea-tracker.png)
+{% /only_light %}
+
+# Concepts {% #concepts %}
+
+This tutorial will introduce the following concepts:
+
+1. Setting up your first project
+2. Authentication
+3. Navigation
+4. Databases and collections
+5. Queries
+
+
+# Prerequisites {% #prerequisites %}
+
+1. Basic knowledge of JavaScript.
+2. Have [Node.js](https://nodejs.org/en) and [NPM](https://www.npmjs.com/) installed on your computer.
diff --git a/src/routes/docs/tutorials/nuxt/step-2/+page.markdoc b/src/routes/docs/tutorials/nuxt/step-2/+page.markdoc
new file mode 100644
index 0000000000..1287aa4a52
--- /dev/null
+++ b/src/routes/docs/tutorials/nuxt/step-2/+page.markdoc
@@ -0,0 +1,152 @@
+---
+layout: tutorial
+title: Create app
+description: Create a Nuxt app project and integrate with Appwrite
+step: 2
+---
+
+# Create Nuxt project {% #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 {% #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
+```
+
+Open the file `nuxt.config.ts`and add links to the stylesheets from the `appwrite.io/pink` to import the design system.
+The design system is then ready to be used in all pages and components with auto-import, meaning that you don't have to add import statements to the scripts.
+
+```ts
+// [nuxt.config.ts]
+
+export default defineNuxtConfig({
+  app: {
+    head: {
+      link: [
+        { rel: "stylesheet", href: "https://unpkg.com/@appwrite.io/pink" },
+        {
+          rel: "stylesheet",
+          href: "https://unpkg.com/@appwrite.io/pink-icons",
+        },
+      ],
+    },
+  },
+  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 {% #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 {% #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.
+
+```vue
+// [layouts/default.vue]
+
+<template>
+  <div>
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  layout: "default",
+};
+</script>
+```
+
+# Add home page {% #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.
+Each file you put in here will automatically become a route.
+Add the file `index.vue` with the following code.
+
+```vue
+// [pages/index.vue]
+
+<template>
+  <div>
+    <h1>Hello, idea tracker!</h1>
+  </div>
+</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 {% #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]
+
+<template>
+  <div>
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </div>
+</template>
+```
diff --git a/src/routes/docs/tutorials/nuxt/step-3/+page.markdoc b/src/routes/docs/tutorials/nuxt/step-3/+page.markdoc
new file mode 100644
index 0000000000..89e25fbf4b
--- /dev/null
+++ b/src/routes/docs/tutorials/nuxt/step-3/+page.markdoc
@@ -0,0 +1,71 @@
+---
+layout: tutorial
+title: Set up Appwrite
+description: Import and configure a project with Appwrite Cloud.
+step: 3
+---
+
+# Create project {% #create-project %}
+
+Head to the [Appwrite Console](https://cloud.appwrite.io/console).
+
+{% only_dark %}
+![Create project screen](/images/docs/quick-starts/dark/create-project.png)
+{% /only_dark %}
+{% only_light %}
+![Create project screen](/images/docs/quick-starts/create-project.png)
+{% /only_light %}
+
+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.
+
+{% only_dark %}
+![Add a platform](/images/docs/quick-starts/dark/add-platform.png)
+{% /only_dark %}
+{% only_light %}
+![Add a platform](/images/docs/quick-starts/add-platform.png)
+{% /only_light %}
+
+You can skip the optional steps.
+
+# Secrets
+
+To connect to Appwrite in our app, we'll need to use sensitive information.
+We keep the secrets by using environment variables for the endpoint and project id.
+Your project id is located in the **Settings** page in the Appwrite console.
+
+{% only_dark %}
+![Project settings screen](/images/docs/quick-starts/dark/project-id.png)
+{% /only_dark %}
+{% only_light %}
+![Project settings screen](/images/docs/quick-starts/project-id.png)
+{% /only_light %}
+
+Add a `.env` file to the root directory and add the following code to it, replacing `YOUR_PROJECT_ID` with your project id.
+
+```
+VITE_APPWRITE_ENDPOINT="https://cloud.appwrite.io/v1"
+VITE_APPWRITE_PROJECT="YOUR_PROJECT_ID"
+```
+
+# Initialize Appwrite SDK {% #init-sdk %}
+
+Create a new file `appwrite.js` for the Appwrite related code.
+Only one instance of the `Client()` class should be created per app.
+Add the following code to it.
+
+```js
+import { Client, Databases, Account } from "appwrite";
+
+const url = import.meta.env.VITE_APPWRITE_ENDPOINT;
+const project = import.meta.env.VITE_APPWRITE_PROJECT;
+
+const client = new Client();
+
+client.setEndpoint(url).setProject(project);
+
+export const account = new Account(client);
+export const database = new Databases(client);
+```
diff --git a/src/routes/docs/tutorials/nuxt/step-4/+page.markdoc b/src/routes/docs/tutorials/nuxt/step-4/+page.markdoc
new file mode 100644
index 0000000000..7086a69149
--- /dev/null
+++ b/src/routes/docs/tutorials/nuxt/step-4/+page.markdoc
@@ -0,0 +1,175 @@
+---
+layout: tutorial
+title: Add authentication
+description: Add authentication to your Nuxt application using Appwrite Web SDK
+step: 4
+---
+
+For our ideas tracker app, we want any visitor to be able to read the ideas that are stored.
+On the other hand, we don't want the page spammed with just about anything from anyone just stopping by.
+To prevent that, or at least making it a bit more difficult, editing ideas will be available for logged in users only.
+With a login function, we can differentiate between users and decide which users have access to which content.
+
+We will build a page with a simple login form and store its related logic in a `useUserSession` composable so it can be reused, starting with the composable.
+
+## User session composable {% #user-session-composable %}
+
+There are a few standard functions involved in handling a user session that is added to the composable.
+The user needs to be able to register to an account, login to the account and logout from it.
+
+We are using Appwrite as a backend to handle the user details, so we need to connect to Appwrite by importing the configurations from step 3.
+The response from these interactions will be stored as references to get more information about the user in our app.
+
+In your `composable` directory, create the file `useUserSession.js` and add the following code.
+Then you can call the  `useUserSession()` function in the pages and components to use the functionality.
+
+```js
+[composable/useUserSession.js]
+
+import { ID } from "appwrite";
+import { ref } from "vue";
+import { account } from "/appwrite";
+
+const current = ref(null) //Reference to current user object
+const isLoggedIn = ref(null) //Reference to check user status
+
+export const useUserSession = () => {
+  const register = async (email, password) => {
+    await account.create(ID.unique(), email, password); // Register new user in Appwrite
+    await login(email, password); // Login registered user
+  };
+
+  const login = async (email, password) => {
+    const authUser = await account.createEmailSession(email, password); // Open user session in Appwrite
+    current.value = authUser; // Pass user data to current ref
+    isLoggedIn.value = true; // Set ref to true
+    navigateTo("/");
+  };
+
+  const logout = async () => {
+    await account.deleteSession("current"); // Delete Appwrite user session
+    current.value = null; // Clear current ref
+    isLoggedIn.value = false; // Set ref to false
+    navigateTo("/");
+  };
+
+  return {
+    current,
+    isLoggedIn,
+    login,
+    logout,
+    register,
+  };
+};
+
+```
+# Login page {% #login-page %}
+
+To get the user input we will build a simple form with the logic from the `useUserSession()` composable.
+The form will have two input fields, one for the user's email-address and one for the password.
+Underneath will be two buttons for logging in or registering the user.
+
+Create a new file in the `pages` directory called `login.vue`.
+This will not only create a new page, it will also add the route `/login` to the url.
+In step 5 we will add a loginbutton that will redirect us to this page.
+Add the following code to build the form.
+
+```vue
+// [pages/login.vue]
+
+<template>
+  <div class="u-max-width-650" style="margin: 0 auto;">
+    <section class="card u-margin-32">
+      <h2 class="eyebrow-heading-2">Login/Register</h2>
+      <form
+        class="form u-width-full-line u-max-width-500 u-margin-block-start-16"
+        @submit.prevent="handleLogin || handleRegistration"
+      >
+        <ul class="form-list">
+          <!-- Input field e-mail -->
+          <li class="form-item">
+            <label class="label">Email</label>
+            <div class="input-text-wrapper">
+              <input
+                v-model="userData.email"
+                type="email"
+                class="input-text"
+                placeholder="Email"
+                required
+              />
+            </div>
+          </li>
+          <!-- Input field e-mail -->
+          <li class="form-item">
+            <label class="label">Password</label>
+            <div class="input-text-wrapper">
+              <input
+                v-model="userData.password"
+                type="password"
+                class="input-text"
+                placeholder="Password"
+                required
+              />
+            </div>
+          </li>
+        </ul>
+        <ul class="buttons-list u-margin-block-start-16">
+          <!-- Login button  -->
+          <li class="buttons-list-item">
+            <button
+              class="button is-small u-margin-inline-start-4"
+              aria-label="Login"
+              @click="handleLogin"
+            >
+              Login
+            </button>
+          </li>
+          <!-- Register button  -->
+          <li class="buttons-list-item">
+            <button
+              class="button is-small is-secondary u-margin-inline-start-4"
+              aria-label="Register account"
+              @click="handleRegistration"
+            >
+              Register
+            </button>
+          </li>
+        </ul>
+      </form>
+    </section>
+  </div>
+</template>
+
+<script>
+  export default {
+    setup() {
+      // Access user composable functions
+      const user = useUserSession();
+
+      // Store user input
+      const userData = {
+        email: "",
+        password: "",
+      };
+
+      // Login user event handler
+      const handleLogin = async () => {
+        await user.login(userData.email, userData.password);
+      };
+
+      // Register user event handler
+      const handleRegistration = async () => {
+        await user.register(userData.email, userData.password);
+      };
+
+      return {
+        handleLogin,
+        handleRegistration,
+        userData,
+      };
+    },
+  };
+</script>
+```
+
+Go to the browser and add `/login` to the url to check out the new page.
diff --git a/src/routes/docs/tutorials/nuxt/step-5/+page.markdoc b/src/routes/docs/tutorials/nuxt/step-5/+page.markdoc
new file mode 100644
index 0000000000..d554de7480
--- /dev/null
+++ b/src/routes/docs/tutorials/nuxt/step-5/+page.markdoc
@@ -0,0 +1,70 @@
+---
+layout: tutorial
+title: Add navigation
+description: Add navigation to your app.
+step: 5
+---
+
+To help our users navigate the app we want it to have a navigation bar that's visible on all pages.
+We will once again use the `useUserSession()` composable for information about the current user.
+
+With this piece of information we will show a login button when no user is logged in and a logout button when one is.
+We will also put the user's e-mail address next to the logout button.
+
+From the `components` directory, create the file `navbar.vue` and add the code below.
+
+```vue
+// [components/navbar.vue]
+
+<template>
+  <div>
+ <!--- Navbar -->
+    <nav class="main-header u-padding-inline-end-0">
+      <h3 class="u-stretch eyebrow-heading-1">Idea Tracker</h3>
+      <!-- Email and logout button if logged in user -->
+      <div
+        class="main-header-end u-margin-inline-end-16"
+        v-if="user.isLoggedIn.value === true"
+      >
+        <p>{{ user.current.value.providerUid }}</p>
+        <button class="button" type="button" @click="user.logout()">
+          Logout
+        </button>
+      </div>
+      <!-- Login button if no user logged in -->
+      <NuxtLink v-else href="/login" class="button u-margin-inline-end-16">
+        Login
+      </NuxtLink>
+    </nav>
+  </div>
+</template>
+
+<script>
+  export default {
+    setup() {
+      const user = useUserSession(); // Access user composable function
+
+      return {
+        user,
+      };
+    },
+  };
+</script>
+
+```
+
+Open `app.vue` from the root directory and add the navigation bar.
+
+```vue
+// [app.vue]
+<template>
+  <NuxtLayout>
+    <!-- Add navbar -->
+    <Navbar />
+    <NuxtPage />
+  </NuxtLayout>
+<template>
+
+```
+
+Have a look in the browser at both the main page and the login page to test the new functionality.
diff --git a/src/routes/docs/tutorials/nuxt/step-6/+page.markdoc b/src/routes/docs/tutorials/nuxt/step-6/+page.markdoc
new file mode 100644
index 0000000000..52f746e70b
--- /dev/null
+++ b/src/routes/docs/tutorials/nuxt/step-6/+page.markdoc
@@ -0,0 +1,98 @@
+---
+layout: tutorial
+title: Add database
+description: Add databases and queries for ideas in your Nuxt project.
+step: 6
+---
+
+In Appwrite, data is stored as a collection of documents. Create a collection in the [Appwrite Console](https://cloud.appwrite.io/) to store the ideas.
+
+{% only_dark %}
+![Create project screen](/images/docs/tutorials/dark/idea-tracker-collection.png)
+{% /only_dark %}
+{% only_light %}
+![Create project screen](/images/docs/tutorials/idea-tracker-collection.png)
+{% /only_light %}
+
+Create a new collection with the following attributes:
+| Field       | Type   | Required |
+|-------------|--------|----------|
+| userId      | String | Yes      |
+| title       | String | Yes      |
+| description | String | No       |
+
+Change the collection's permissions in the settings to give access.
+First, add the role **Any** and check the **Read** box.
+Next, add a **Users** role and give them access to **create**, **update** and **delete** by checking those boxes.
+
+# Secrets
+
+Just like when we set up the connection to Appwrite in [step 2](/docs/tutorials/nuxt/step-2), we need to keep the variables with the collection id secret.
+Open the `.env` file and add your database id and your collection id to it.
+
+```
+VITE_IDEAS_DATABASE_ID="YOUR_DATABASE_ID"
+VITE_IDEAS_COLLECTION_ID="YOUR_COLLECTION_ID"
+```
+
+# Query methods {% #query-methods %}
+
+Now that we have a collection in the database to hold ideas, we can connect to it from our app.
+Our users should be able to read, add and remove ideas.
+We will add a new composable, `useIdeas`, to handle this functionality.
+
+Create a new file in the composables directory, `useIdeas.js` and add the following code.
+
+```js
+// [composables/useIdeas.js]
+
+import { ID, Query } from "appwrite";
+import { database } from "~/appwrite";
+import { ref } from "vue";
+
+const ideasDatabaseId = import.meta.env.VITE_IDEAS_DATABASE_ID;
+const ideasCollectionId = import.meta.env.VITE_IDEAS_COLLECTION_ID;
+
+const current = ref(null); //Reference for the fetched data
+
+export const useIdeas = () => {
+
+  // Fetch the 10 most recent ideas from the database
+  // Add the list to the current reference object
+  const init = async () => {
+    const response = await database.listDocuments(
+      ideasDatabaseId,
+      ideasCollectionId,
+      [Query.orderDesc("$createdAt"), Query.limit(10)]
+    );
+    current.value = response.documents;
+  };
+
+  // Add new idea to the database,
+  // Change the value of the current object
+  const add = async (idea) => {
+    const response = await database.createDocument(
+      ideasDatabaseId,
+      ideasCollectionId,
+      ID.unique(),
+      idea
+    );
+    current.value = [response, ...current.value].slice(0, 10);
+  };
+
+  const remove = async (id) => {
+    await database.deleteDocument(ideasDatabaseId, ideasCollectionId, id);
+    await init(); //Refetch ideas to ensure we have 10 items
+  };
+
+  return {
+    add,
+    current,
+    init,
+    remove,
+  };
+};
+
+```
+
+Now we can call the `useIdeas()` composable from the home page.
diff --git a/src/routes/docs/tutorials/nuxt/step-7/+page.markdoc b/src/routes/docs/tutorials/nuxt/step-7/+page.markdoc
new file mode 100644
index 0000000000..87fbbbe4e4
--- /dev/null
+++ b/src/routes/docs/tutorials/nuxt/step-7/+page.markdoc
@@ -0,0 +1,222 @@
+---
+layout: tutorial
+title: Ideas page
+description: Add ideas from Appwrite database in your app.
+step: 7
+---
+
+With the methods in the `useIdeas`composable we can get some ideas to the home page for the users to interact with.
+We will use it in a form component so the logged in users can add their ideas, and in a list component to render the ten most recent ideas.
+We start with building the form.
+
+# Idea form {% #idea-form %}
+
+On the home page, the logged in users should be able to add their ideas to the Appwrite database.
+The form need a text field for filling in the title, a textarea for the description and a submit button.
+
+From the `components` directory, add the file `ÌdeasForm.vue` and add the following code.
+
+```vue
+// [components/IdeasForm.vue]
+
+<template>
+  <div>
+    <article class="container padding-0">
+      <h4 class="heading-level-4">Submit Idea</h4>
+      <form @submit.prevent="handleAddIdea" class="u-margin-block-start-16">
+        <ul class="form-list">
+          <!-- Title input field -->
+          <li class="form-item">
+            <label class="label">Title</label>
+            <input
+              type="text"
+              placeholder="Title"
+              v-model="addIdeaData.title.value"
+            />
+          </li>
+          <!-- Description input field -->
+          <li class="form-item">
+            <label class="label">Description</label>
+            <textarea
+              placeholder="Description"
+              v-model="addIdeaData.description.value"
+            />
+          </li>
+          <button class="button" aria-label="Submit idea" type="submit">
+            Submit
+          </button>
+        </ul>
+      </form>
+    </article>
+  </div>
+</template>
+
+<script>
+  export default {
+    setup() {
+      const ideas = useIdeas();
+      const user = useUserSession();
+
+      // Store input field values
+      const addIdeaData = {
+        title: ref(""),
+        description: ref(""),
+      };
+
+      const handleAddIdea = async () => {
+        // Extract the values from the refs and add userId
+        const postIdeaData = {
+          userId: user.current.value.userId,
+          title: addIdeaData.title.value,
+          description: addIdeaData.title.value,
+        };
+        await ideas.add(postIdeaData);
+        addIdeaData.title.value = ""; // Clear the title textfield
+        addIdeaData.description.value = ""; // Clear the description textarea
+      };
+
+      return {
+        addIdeaData,
+        handleAddIdea,
+        ideas,
+      };
+    },
+  };
+</script>
+
+```
+
+Next, add the component to the page `pages/index.vue` by auto-importing it in the `<template>`tag.
+In doing that, we need to take a moment to think about how we want to display the form to the users.
+Since it should only be shown to logged in user, we need to wrap it in a `<section>`that renders conditionally when the `isLoggedIn` reference in the `useUserSession` is true.
+If the requirement is not met, we show a paragraph with some information to the user instead.
+
+Add the following code to the `index.vue`page to conditionally render the form and information paragraph.
+
+Overwrite the contents of `pages/index.vue` with the following code.
+
+```vue
+// [pages/index.vue]
+
+<template>
+  <div class="u-max-width-650" style="margin: 0 auto;">
+    <!-- Idea form component for logged in users -->
+    <section v-if="user.isLoggedIn.value === true" class="card u-margin-32">
+      <IdeasForm />
+    </section>
+
+    <!-- Paragraph for not logged in users -->
+    <section v-else class="card u-margin-32">
+      <div class="container">
+        <p class="body-text-1" style="width: 100%;">
+          Please login to submit an idea.
+        </p>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+  export default {
+    setup() {
+      const user = useUserSession();
+
+      return {
+        user,
+      };
+    },
+  };
+</script>
+
+<style>
+  article.box {
+    background-color: hsl(var(--color-neutral-0));
+  }
+</style>
+
+````
+
+# Ideas list {% #ideas-list %}
+Now that we can get some ideas to show, we go on to build the component for the list of ideas.
+
+Once again, we need to take a moment to think about how this component should work.
+First of all, the ideas should be visible for the users before any interaction has taken place on the page.
+To catch that moment in time when the page loads, we call our `init()` function, that fetches the ideas in Appwrite, from the built-in `onMounted` function.
+
+Second, it's likely that a user will want to delete one of their ideas from the database.
+We help them do that by adding a delete button in the top right corner of the idea list item, but only on the ideas added by the user itself.
+
+Add the file `IdeasList`from the `componenents` directory and insert the following code:
+
+```vue
+[componenents/IdeasList.vue]
+
+<template>
+  <section class="u-margin-32">
+    <article class="card">
+      <h4 class="heading-level-4">Latest Ideas</h4>
+      <ul class="u-margin-block-start-8">
+        <li v-for="idea in ideas.current.value">
+          <div class="box">
+            <h5 class="heading-level-6">{{ idea.title }}</h5>
+            <p class="body-text-2">{{ idea.description }}</p>
+            <div
+              class="u-position-absolute u-inset-inline-end-8 u-inset-block-start-8"
+            >
+              <button
+                class="button is-small is-text is-only-icon"
+                aria-label="Remove item"
+                v-if="
+                  user.current.value &&
+                  idea.userId === user.current.value.userId
+                "
+                type="button"
+                @click="ideas.remove(idea.$id)"
+              >
+                <span class="icon-document-remove" aria-hidden="true" />
+              </button>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </article>
+  </section>
+</template>
+
+<script>
+  export default {
+    setup() {
+      const ideas = useIdeas();
+      const user = useUserSession();
+
+      // Get ideas on page load
+      onMounted(() => {
+        ideas.init();
+      });
+      return { ideas, user };
+    },
+  };
+</script>
+
+```
+
+Return to the file `pages/index.vue` once more to import the list of ideas.
+This component should be visible to all users, so no conditional rendering neeeds to be handled.
+
+```vue
+// [pages/index.vue]
+
+<template>
+  <div class="u-max-width-650" style="margin: 0 auto;">
+    <!-- Section with form component for logged in users -->
+    <!-- Section with paragraph for not logged in users -->
+
+    <!-- Add list of ideas component for all users -->
+    <IdeasList />
+  </div>
+</template>
+
+````
+
+Congratulations!
+You now have an ideas tracker built with Nuxt and Appwrite to use locally.
diff --git a/src/routes/docs/tutorials/nuxt/step-8/+page.markdoc b/src/routes/docs/tutorials/nuxt/step-8/+page.markdoc
new file mode 100644
index 0000000000..59d8e21475
--- /dev/null
+++ b/src/routes/docs/tutorials/nuxt/step-8/+page.markdoc
@@ -0,0 +1,11 @@
+---
+layout: tutorial
+title: Next steps
+description: View your Nuxt app built on Appwrite Cloud.
+step: 8
+---
+
+# Test your project {% #test-project %}
+Run your project with `npm run dev -- --open --port 3000` and open [http://localhost:3000](http://localhost:3000) in your browser.
+
+Head to the [Appwrite Console](https://cloud.appwrite.io/console) to see the new users and follow their interactions.