Address all comments

src/routes/docs/tutorials/nuxt/step-2/+page.markdoc

@@ -40,7 +40,7 @@ import "@appwrite.io/pink-icons";
 
 Then update `nuxt.config.ts` to disable SSR for now. SSR support is coming soon to Appwrite, for now, disable SSR.
 
-```js
+```ts
 // nuxt.config.ts
 
 // https://nuxt.com/docs/api/configuration/nuxt-config

src/routes/docs/tutorials/nuxt/step-6/+page.markdoc

@@ -52,7 +52,7 @@ 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
+```ts
 // composables/useIdeas.ts
 
 import { ID, Query, Models} from "appwrite";
@@ -61,6 +61,7 @@ import { ref } from "vue";
 
 const ideasDatabaseId: string = import.meta.env.VITE_DATABASE_ID;
 const ideasCollectionId: string = import.meta.env.VITE_COLLECTION_ID;
+const queryLimit: number = 10;
 
 interface Idea extends Models.Document{
     title: string;
@@ -71,13 +72,14 @@ interface Idea extends Models.Document{
 const current = ref<Idea[] | null>(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 fetch = async () => {
+    const fetch = async (): Promise<void> => {
         const response = await database.listDocuments(
             ideasDatabaseId,
             ideasCollectionId,
-            [Query.orderDesc("$createdAt"), Query.limit(10)]
+            [Query.orderDesc("$createdAt"), Query.limit(queryLimit)]
         );
         current.value = response.documents as Idea[];
     };
@@ -99,6 +101,8 @@ export const useIdeas = () => {
         await fetch(); // Refetch ideas to ensure we have 10 items
     };
 
+    fetch();
+
     return {
         add,
         current,

src/routes/docs/tutorials/nuxt/step-7/+page.markdoc

@@ -130,42 +130,35 @@ import { onMounted } from 'vue';
 
 const ideas = useIdeas();
 const user = useUserSession();
-
-console.log(ideas.current.value);
-
-// Get ideas on page load
-onMounted(() => {
-    ideas.fetch();
-});
 </script>
 
 <template>
     <section class="u-margin-32">
-        <article class="card">
-            <h4 class="heading-level-4">Latest Ideas</h4>
-            <ul class="u-margin-block-start-8">
-                <template v-if="ideas.current.value?.length">
-                    <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>
-                </template>
-                <template v-else>
-                    <p>No ideas yet.</p>
-                </template>
-            </ul>
-        </article>
+      <article class="card">
+        <h4 class="heading-level-4">Latest Ideas</h4>
+        <ul class="u-margin-block-start-8">
+          <template v-if="ideas.current.value && ideas.current.value.length">
+            <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>
+          </template>
+          <template v-else>
+            <p>No ideas yet.</p>
+          </template>
+        </ul>
+      </article>
     </section>
-</template>
+  </template>
 ```
 
 Return to the file `pages/index.vue` once more to import the list of ideas.

src/routes/docs/tutorials/nuxt/step-8/+page.markdoc

@@ -6,6 +6,6 @@ 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.
+Run your project with `npm run dev` and open the URL shown by the NPM command in your browser.
 
 Head to the [Appwrite Console](https://cloud.appwrite.io/console) to see the new users and follow their interactions.