Feat nuxt tutorial #355

gewenyu99 · 2023-11-17T20:12:15Z

What does this PR do?

Add Nuxt tutorial by @evelinabe

Test Plan

(Write your test plan here. If you changed any code, please provide us with clear instructions on how you verified your changes work.)

Related PRs and Issues

(If this PR is related to any other PR or resolves any issue or related to any issue link all related PR and issues here.)

Have you read the Contributing Guidelines on issues?

(Write your answer here.)

render · 2023-11-17T20:12:20Z

Your Render PR Server URL is https://appwrite-pr-355.onrender.com.

Follow its progress at https://dashboard.render.com/web/srv-clbsi8l4lnec73ecovug.

vercel · 2023-11-17T20:12:21Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
website	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 15, 2024 8:18pm

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

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

TGlide · 2024-01-04T11:02:48Z

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

+ <!-- Email and logout button if logged in user -->
+ <div
+ class="main-header-end u-margin-inline-end-16"
+ v-if="user.isLoggedIn.value === true"


IIRC you don't need .value in templates. Weird, I know.

TGlide · 2024-01-04T11:08:03Z

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

+import { database } from "~/appwrite";
+import { ref } from "vue";
+
+const ideasDatabaseId = import.meta.env.VITE_IDEAS_DATABASE_ID;


The ideas prefix is unnecessary, we can infer it's the ideas database from the file name, or by the env variable name.

TGlide · 2024-01-04T11:09:16Z

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

+
+ // Fetch the 10 most recent ideas from the database
+ // Add the list to the current reference object
+ const init = async () => {


The name is misleading, since this is used more than once. Refetch or invalidate would be better names. Also, this can be called immediately when the composable is created, and probably doesn't need to be an exposed method.

TGlide · 2024-01-04T11:10:04Z

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

+ <input
+ type="text"
+ placeholder="Title"
+ v-model="addIdeaData.title.value"


Formdata could be used to avoid creating refs and binding them. Especially as nothing else is being done with these.

TGlide · 2024-01-04T11:10:34Z

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

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


Some spaces are missing here.

render · 2024-01-10T22:38:30Z

Your Render PR Server URL is https://appwrite-io-pr-355.onrender.com.

Follow its progress at https://dashboard.render.com/web/srv-cmfhop7109ks73ejn4pg.

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

TGlide · 2024-01-12T17:16:46Z

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

+
+<template>
+ <div>
+ <h1>Hello, idea tracker!</h1>


Should we add pink classes to make it look pwetty?

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

TGlide · 2024-01-12T17:22:30Z

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

+ await account.deleteSession("current"); // Delete Appwrite user session
+ current.value = null; // Clear current ref
+ navigateTo("/");
+ };


Don't forget to check if the user is logged in when initialising the composable

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

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

TGlide · 2024-01-12T17:45:47Z

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

+const ideas = useIdeas();
+const user = useUserSession();
+
+console.log(ideas.current.value);


TGlide · 2024-01-12T17:46:01Z

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

+onMounted(() => {
+ ideas.fetch();
+});


This can be done inside useIdeas

TGlide · 2024-01-12T17:46:42Z

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

+ <!-- Section with form component for logged in users -->
+ <!-- Section with paragraph for not logged in users -->
+


A bit confusing

Replaced with ...skipped code.

TGlide · 2024-01-12T17:47:49Z

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

+---
+
+# Test your project {% #test-project %}
+Run your project with `npm run dev -- --open --port 3000` and open [http:https://localhost:3000](http:https://localhost:3000) in your browser.


In another one of the steps, we mentioned using npm run dev directly, instead of specifying a port.

IMO, we should not try and change the port, no reason to. Port 3000 is a React convention, most projects use something else, and it's fine :)

render · 2024-01-12T19:38:30Z

Your Render PR Server URL is https://appwrite-io-docker-pr-355.onrender.com.

Follow its progress at https://dashboard.render.com/web/srv-cmgpad021fec738lsoj0.

feat: android tutorial

TGlide · 2024-01-17T23:16:14Z

@gewenyu99 why does this have an android tutorial in it as well?

gewenyu99 · 2024-01-18T02:15:01Z

@gewenyu99 why does this have an android tutorial in it as well?

I merged the Android tutorial reviewed separately here. There are some shared photo assets.

gewenyu99 · 2024-01-18T02:15:32Z

@TGlide #190

Revert "feat: android tutorial"

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

TGlide · 2024-01-18T17:57:10Z

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

+
+Next, head over to the `pages`directory.
+This is where we will keep the content that will render on our pages in the web application.
+Each file you put in here will automatically become a route.


It may be unclear as to what that means.

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

TGlide · 2024-01-18T17:58:42Z

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

+The response from these interactions will be stored as references to get more information about the user in our app.
+
+In your `composable` directory, create the file `useUserSession.js` and add the following code.
+Then you can call the `useUserSession()` function in the pages and components to use the functionality.


Maybe include this line after the code snippet?

TGlide · 2024-01-18T17:59:28Z

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

+ });
+
+ return {
+ current,


Current is a weird name, maybe call it user?

Maybe it's fine, since you're doing user.current.

Yeah that's the idea

TGlide · 2024-01-18T18:00:20Z

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

+In step 5 we will add a login button that will redirect us to this page.
+
+We will define functions to handle form submissions and show either a signup
+or a login form, which renders one form or the other depending on `isSignUp`'s state.


isSignUp has not yet been defined, isn't it confusing?

TGlide · 2024-01-18T18:01:30Z

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

+# Authentication forms {% #auth-forms %}
+
+In the previous step, we defined a `AuthForm` to handle signup and login. 
+Let's build this form now.


Hmm, shouldn't we maybe create it before the page? Either is fine by me, just a suggestion.

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

TGlide · 2024-01-18T18:09:36Z

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

+
+<template>
+ <div class="u-max-width-650" style="margin: 0 auto;">
+ ... Some skipped code


Use HTML commments

TGlide · 2024-01-18T18:09:44Z

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

+ </div>
+</template>
+
+.. Skipped script section and styling


Co-authored-by: Thomas G. Lopes <[email protected]>

vercel bot deployed to Preview November 17, 2023 20:15 View deployment

gewenyu99 marked this pull request as ready for review November 17, 2023 21:20

vercel bot deployed to Preview November 17, 2023 21:23 View deployment

vercel bot deployed to Preview November 24, 2023 22:53 View deployment

gewenyu99 requested a review from TGlide November 27, 2023 15:29

github-actions bot mentioned this pull request Dec 1, 2023

PRs Opened in November 2023 appwrite/.github#100

Closed

TGlide suggested changes Jan 4, 2024

View reviewed changes

vercel bot deployed to Preview January 10, 2024 22:45 View deployment

vercel bot deployed to Preview January 11, 2024 03:14 View deployment

gewenyu99 requested a review from TGlide January 11, 2024 18:40

TGlide reviewed Jan 12, 2024

View reviewed changes

appwrite deleted a comment from TGlide Jan 12, 2024

vercel bot had a problem deploying to Preview January 12, 2024 19:46 Failure

vercel bot had a problem deploying to Preview January 12, 2024 20:55 Failure

vercel bot had a problem deploying to Preview January 12, 2024 22:35 Failure

vercel bot deployed to Preview January 15, 2024 20:18 View deployment

gewenyu99 requested a review from TGlide January 16, 2024 14:57

Merge pull request #190 from appwrite/feat-android-tutorial

4e32437

feat: android tutorial

Vincent (Wen Yu) Ge added 4 commits January 17, 2024 21:17

Revert "feat: android tutorial"

f5d1825

Merge pull request #528 from appwrite/revert-190-feat-android-tutorial

0aa8cc4

Revert "feat: android tutorial"

Merge branch 'main' into feat-nuxt-tutorial

15758bf

Fix merge conflicts

22f1e9b

TGlide reviewed Jan 18, 2024

View reviewed changes

Vincent (Wen Yu) Ge and others added 4 commits January 18, 2024 13:10

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

c1747da

Co-authored-by: Thomas G. Lopes <[email protected]>

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

10bbef2

Co-authored-by: Thomas G. Lopes <[email protected]>

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

ab7a095

Co-authored-by: Thomas G. Lopes <[email protected]>

Fixes Thomas' review comments

6afe0f3

TGlide approved these changes Jan 18, 2024

View reviewed changes

gewenyu99 merged commit 1d43024 into main Jan 18, 2024
1 check passed

TorstenDittmann deleted the feat-nuxt-tutorial branch January 22, 2024 11:51

github-actions bot mentioned this pull request Feb 1, 2024

PRs Closed in January 2024 appwrite/.github#112

Closed

		<!-- Section with form component for logged in users -->
		<!-- Section with paragraph for not logged in users -->

Feat nuxt tutorial #355

Feat nuxt tutorial #355

Conversation

gewenyu99 commented Nov 17, 2023

What does this PR do?

Test Plan

Related PRs and Issues

Have you read the Contributing Guidelines on issues?

render bot commented Nov 17, 2023

vercel bot commented Nov 17, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

render bot commented Jan 10, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

render bot commented Jan 12, 2024

TGlide commented Jan 17, 2024

gewenyu99 commented Jan 18, 2024

gewenyu99 commented Jan 18, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vercel bot commented Nov 17, 2023 •

edited

Loading