Implement some of Thomas' comments

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

@@ -21,28 +21,29 @@ Once the project is created, change your current working directory and install t
 ```sh
 cd ideas-tracker
 npm install appwrite
+npm install "@appwrite.io/pink"
 ```
 
-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.
+Open `App.vue` and import the relevant style files.
 
-```ts
-// [nuxt.config.ts]
+```html
+<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.
+
+```js
+// https://nuxt.com/docs/api/configuration/nuxt-config
 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 },
-});
+  ssr: false,
+  devtools: { enabled: true }
+})
 ```
 
 You can start the development server to watch your app update in the browser as you make your changes.
@@ -74,8 +75,8 @@ 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
+```html
+<!-- layouts/default.vue -->
 
 <template>
   <div>
@@ -98,7 +99,7 @@ Each file you put in here will automatically become a route.
 Add the file `index.vue` with the following code.
 
 ```vue
-// pages/index.vue
+<!-- pages/index.vue -->
 
 <template>
   <div>
@@ -139,7 +140,12 @@ Open `app.vue`in the root directory and replace the content with the following c
 Your page will now be up and running.
 
 ```vue
-// app.vue
+<!-- app.vue -->
+
+<script setup>
+import "@appwrite.io/pink";
+import "@appwrite.io/pink-icons";
+</script>
 
 <template>
   <div>

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

@@ -30,7 +30,7 @@ import { ID } from "appwrite";
 import { ref } from "vue";
 import { account } from "/appwrite";
 
-const current = ref(null) //Reference to current user object
+const current = ref(null) // Reference to current user object
 const isLoggedIn = ref(null) //Reference to check user status
 
 export const useUserSession = () => {

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

@@ -31,8 +31,8 @@ Just like when we set up the connection to Appwrite in [step 3](/docs/tutorials/
 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"
+VITE_DATABASE_ID="YOUR_DATABASE_ID"
+VITE_COLLECTION_ID="YOUR_COLLECTION_ID"
 ```
 
 # Query methods {% #query-methods %}
@@ -50,8 +50,8 @@ 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 ideasDatabaseId = import.meta.env.VITE_DATABASE_ID;
+const ideasCollectionId = import.meta.env.VITE_COLLECTION_ID;
 
 const current = ref(null); //Reference for the fetched data
 
@@ -59,7 +59,7 @@ export const useIdeas = () => {
 
   // Fetch the 10 most recent ideas from the database
   // Add the list to the current reference object
-  const init = async () => {
+  const fetch = async () => {
     const response = await database.listDocuments(
       ideasDatabaseId,
       ideasCollectionId,
@@ -82,13 +82,13 @@ export const useIdeas = () => {
 
   const remove = async (id) => {
     await database.deleteDocument(ideasDatabaseId, ideasCollectionId, id);
-    await init(); //Refetch ideas to ensure we have 10 items
+    await fetch(); //Refetch ideas to ensure we have 10 items
   };
 
   return {
     add,
     current,
-    init,
+    fetch,
     remove,
   };
 };

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

@@ -88,6 +88,7 @@ From the `components` directory, add the file `ÌdeasForm.vue` and add the follo
 
 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.
 
@@ -141,7 +142,7 @@ Now that we can get some ideas to show, we go on to build the component for the
 
 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.
+To catch that moment in time when the page loads, we call our `fetch()` 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.
@@ -191,7 +192,7 @@ Add the file `IdeasList`from the `componenents` directory and insert the followi
 
       // Get ideas on page load
       onMounted(() => {
-        ideas.init();
+        ideas.fetch();
       });
       return { ideas, user };
     },