#84 Nuxt tutorial

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

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
+    };
+};

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');
+};

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: 12
+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.

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

@@ -0,0 +1,98 @@
+---
+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.
+
+```sh
+npx nuxi@latest init ideas-tracker
+```
+
+# Add dependencies {% #add-dependencies %}
+
+Install the JavaScript Appwrite SDK.
+
+```sh
+npm install appwrite
+```
+
+You can start the development server to watch your app update in the browser as you make changes.
+
+```sh
+npm run dev
+```
+
+# Set up files {% #set up-files %}
+
+In Nuxt, directories help organize the codebase and minimize boilerplate.
+The purpose is making it easy to find and manage different aspect of your application.
+
+The files added to the `pages` directory will automatically become a route.
+Nuxt will look for a layout in the `layouts` directory to render a page layout.
+Without a layout file in this directory, the routing won't work
+When these files have been created the `app.vue` file needs to edited to render these pages instead of the standard welcome page.
+Then, we will have a working app where we can verify our changes in the browser throughout the tutorial.
+As an additional step, we will be adding [Appwrite's Pink Design system]('https://pink.appwrite.io/') to have a global design system to help with the layout.
+
+First, add a page by creating the file `src/pages/index.vue` and add the following code.
+
+```vue
+<template>
+  <div>
+    <h1>Hello, idea tracker!</h1>
+  </div>
+</template>
+```
+
+Create the file `src/layouts/default.vue` to add the default layout.
+
+```vue
+<template>
+  <div>
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  layout: "default",
+};
+</script>
+```
+
+Go to `app.vue`, remove `NuxtWelcome`and insert `<NuxtPage />` wrapped inside `<NuxtLayout>`.
+
+```vue
+<template>
+  <div>
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </div>
+</template>
+```
+
+To import Appwrite's design system to all pages and components, edit the file `nuxt.config.ts`.
+The layouts is then ready to be used in the templates with auto-import.
+
+```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 },
+});
+```

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

@@ -0,0 +1,59 @@
+---
+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.
+
+# Initialize Appwrite SDK {% #init-sdk %}
+
+To use Appwrite in our app, we'll need to find our project ID.
+It is located 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 `src/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, replacing `<YOUR_PROJECT_ID>` with your project ID.
+
+```js
+import { Client, Databases, Account } from "appwrite";
+
+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 const database = new Databases(client);
+```