From 5416c5baae5a89e8d0f57a3e642a11967a5a9f8b Mon Sep 17 00:00:00 2001
From: loks0n <22452787+loks0n@users.noreply.github.com>
Date: Wed, 27 Sep 2023 17:14:09 +0100
Subject: [PATCH] feat: nuxt starter

---
 .../docs/quick-starts/nuxt/+page.markdoc      | 126 +++++++++++++++++-
 1 file changed, 120 insertions(+), 6 deletions(-)

diff --git a/src/routes/docs/quick-starts/nuxt/+page.markdoc b/src/routes/docs/quick-starts/nuxt/+page.markdoc
index 37b561cd4c..c5c379c26c 100644
--- a/src/routes/docs/quick-starts/nuxt/+page.markdoc
+++ b/src/routes/docs/quick-starts/nuxt/+page.markdoc
@@ -6,11 +6,125 @@ difficulty: beginner
 readtime: 3
 ---
 
-Improve the docs, add this guide.
+Learn to setup your first Nuxt project powered by Appwrite.
+{% section #step-1 step=1 title="Create project" %}
+Head to the [Appwrite Console](https://cloud.appwrite.io/console).
 
-We still don't have this guide in place, but we do have some great news. 
-The Appwrite docs, just like Appwrite, is completely open sourced.
-This means, anyone can help improve them and add new guides and tutorials. 
+{% 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 you see this page, **we're actively looking for contributions to this page**.
-Follow our contribution guidelines, open a PR to [our Website repo](https://github.com/appwrite/website), and collaborate with our core team to improve this page.
\ No newline at end of file
+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 optional steps.
+
+{% /section %}
+{% section #step-2 step=2 title="Create Nuxt project" %}
+Create a Nuxt project.
+
+```sh
+npx nuxi@latest init my-app && cd my app
+
+```
+{% /section %}
+{% section #step-3 step=3 title="Install Appwrite" %}
+
+Install the JavaScript Appwrite SDK.
+
+```sh
+npm install appwrite
+```
+{% /section %}
+{% section #step-4 step=4 title="Import Appwrite" %}
+Find your project's ID in the **Settings** page. 
+
+{% 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 %}
+
+Create a new file `utils/appwrite.js` and add the following code to it, replace `<YOUR_PROJECT_ID>` with your project ID.
+
+```js
+import { Client, Account} from 'appwrite';
+
+export const client = new Client();
+
+client
+    .setEndpoint('https://cloud.appwrite.io/v1')
+    .setProject('<YOUR_PROJECT_ID>'); // Replace with your project ID
+
+export const account = new Account(client);
+export { ID } from 'appwrite';
+```
+{% /section %}
+{% section #step-5 step=5 title="Create a login page" %}
+Add the following code to `app.vue`.
+
+```html
+<template>
+  <div>
+    <p>
+      {{ loggedInUser ? `Logged in as ${loggedInUser.name}` : 'Not logged in' }}
+    </p>
+
+    <form>
+      <input type="email" placeholder="Email" v-model="email" />
+      <input type="password" placeholder="Password" v-model="password" />
+      <input type="text" placeholder="Name" v-model="name" />
+      <button type="button" @click="login(email, password)">Login</button>
+      <button type="button" @click="register">
+        Register
+      </button>
+      <button type="button" @click="logout">
+        Logout
+      </button>
+    </form>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { account, ID } from './utils/appwrite.js';
+
+const loggedInUser = ref(null);
+const email = ref('');
+const password = ref('');
+const name = ref('');
+
+const login = async (email, password) => {
+  await account.createEmailSession(email, password);
+  loggedInUser.value = await account.get();
+};
+
+const register = async () => {
+  await account.create(ID.unique(), email.value, password.value, name.value);
+  login(email.value, password.value);
+};
+
+const logout = async () => {
+  await account.deleteSession('current');
+  loggedInUser.value = null;
+};
+</script>
+```
+{% /section %}
+
+{% section #step-6 step=6 title="Checkout what you've built" %}
+Run your project with `npm run dev -- --open --port 3000` and open [http://localhost:3000](http://localhost:3000) in your browser.
+{% /section %}