📚 Documentation: Tutorial for Nuxt

[gewenyu99]

💭 Description

Goal

Interactive tutorial for beginners to build their first functioning app using Nuxt and Appwrite.

Content

1. The end product should be a functional app
2. Step by step from setup. If there will be test data, provide a Server SDK script with instructions.
3. Format should be similar to /docs/tutorials/sveltekit
4. Should contain the following content
   1. install dependencies
   2. make first request
   3. implement auth
   4. intro to databases
   5. queries and paginations
   6. storage (optional)
   7. realtime (optional)
   8. permissions (optional)

How to contribute

Pitch an outline detailing each page you plan to add and headings within, and ask to be assigned. Open a PR after the outline has been approved.

The Appwrite team will collaborate with you on the outline and PR.

Thanks for taking the time to make our documentation better 🙏

👀 Have you spent some time to check if this issue has been raised before?

• [X] I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• [X] I have read the Code of Conduct

[evelinabe]

Hi, I would like to be assigned this issue. I'm thinking it will follow the exact same steps as the beginner tutorials for React, Sveltekit and Vue with the end result being an ideas tracker app. The outline would be something like this:

1. Build an ideas tracker with Nuxt

• [X] Concepts

• [X] Prerequisites

2. Create app

• [X] Create Nuxt project

• [x] Add dependencies

3. Set up Appwrite

• [x] Create project

• [x] Initialize Appwrite SDK

4. Add authentication

• [x] Composer
• [x] Login/register Page

5. Add navigation

• [X] Simple navbar

6. Add database

• [X] Create collection
• [X] Basic methods

7. Create ideas page

8. Next steps

• [X] Test your project
• [ ] Add style

[gewenyu99]

@evelinabe Can I challenge you in an additional step of uploading and displaying images? ;)

I've assigned it to you, happy hacking, make sure every 2-3 days to give us a quick status update!

[evelinabe]

@evelinabe Can I challenge you in an additional step of uploading and displaying images? ;)

I've assigned it to you, happy hacking, make sure every 2-3 days to give us a quick status update!

Challenge accepted

[Amit12234]

Hi , if it get unassigned , please assign it to me.

[evelinabe]

@Amit12234 I'm assigned to it and currently working on it :-)

[evelinabe]

@gewenyu99 status-report: making progress. Added checkboxes to the outline and checked the ones that are finished.

[evelinabe]

@gewenyu99 Some styling left before I open a PR

[gewenyu99]

@evelinabe thanks for the update!

Please also have your complete code ready in a repository like https://github.com/loks0n?tab=repositories

So we can fork + add to Appwrite and link in tutorial in the future!

[evelinabe]

@gewenyu99 Here's the repo: https://github.com/evelinabe/nuxt-ideas-tracker-tutorial Aha, I thought I was supposed to add the tutorial in the appwrite-website repo as well? Then I'm nearly done, I suppose :D

[evelinabe]

@gewenyu99 Closed the first PR because I had forgotten to pull the latest changes from main and I thought the history got so messy when I wanted to do some changes after seeing in another review that you wanted minimal styling or pink.appwrite.io. Changes done and new PR opened. Have a nice weekend!