Skip to content

Commit

Permalink
Update step 1-4
Browse files Browse the repository at this point in the history
  • Loading branch information
@evelinabe
evelinabe committed Oct 18, 2023
1 parent c9502e8 commit 6f44f13
Show file tree
Hide file tree
Showing 4 changed files with 72 additions and 51 deletions.
2 changes: 2 additions & 0 deletions src/routes/docs/tutorials/nuxt/step-1/+page.markdoc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ 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
---

Expand Down
41 changes: 16 additions & 25 deletions src/routes/docs/tutorials/nuxt/step-2/+page.markdoc
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
---
layout: tutorial
title: Build an ideas tracker with Nuxt
description: Learn to build an idea tracker app with Appwrite and Nuxt
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
```
Expand All @@ -28,19 +27,19 @@ You can start the development server to watch your app update in the browser as
npm run dev
```

# Pages and layouts for routing {% #pages-and-layout-for-routing %}

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.
# Setup files {% #setup-files %}

The files added to the `pages` directory will automatically become a route. Nuxt will look for a layout (can be more than one) to accompany a page
in the `layouts` directory. When these files have been created we can edit the `app.vue` file to render our pages. Now we will have a working app to verify our changes in the development server throughout the tutorial.
As an additional step, by adding [Appwrite's Pink Design system]('https://pink.appwrite.io/') we will also have a global layout system to help with the layout.
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.

### 1. Add a page

Create file `src/pages/index.vue` and add the following code:
First, add a page by creating the file `src/pages/index.vue` and add the following code.

```vue
<template>
Expand All @@ -50,10 +49,7 @@ Create file `src/pages/index.vue` and add the following code:
</template>
```


### 2. Add a default layout

a file `src/layouts/default.vue` and insert the following code:
Create the file `src/layouts/default.vue` to add the default layout.

```vue
<template>
Expand All @@ -69,9 +65,7 @@ export default {
</script>
```

### 3. Edit app

Go to `app.vue`, remove `NuxtWelcome`and insert `NuxtPage` wrapped in `NuxtLayout`
Go to `app.vue`, remove `NuxtWelcome`and insert `<NuxtPage />` wrapped inside `<NuxtLayout>`.

```vue
<template>
Expand All @@ -83,11 +77,8 @@ Go to `app.vue`, remove `NuxtWelcome`and insert `NuxtPage` wrapped in `NuxtLayou
</template>
```


### 4. Import layout

Edit `nuxt.config.ts`to import Appwrite's design system to all pages and components.
The classes will be ready to use in the templates through auto-import.
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({
Expand Down
6 changes: 4 additions & 2 deletions src/routes/docs/tutorials/nuxt/step-3/+page.markdoc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@ Head to the [Appwrite Console](https://cloud.appwrite.io/console).

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.
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)
Expand All @@ -31,7 +32,8 @@ You can skip optional steps.

# Initialize Appwrite SDK {% #init-sdk %}

To use Appwrite in our Nuxt app, we'll need to find our project ID. It is located in the **Settings** page.
To use Appwrite in our Nuxt 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)
Expand Down
74 changes: 50 additions & 24 deletions src/routes/docs/tutorials/nuxt/step-4/+page.markdoc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,37 +5,41 @@ description: Add authentication to your Nuxt application using Appwrite Web SDK
step: 4
---

# Nuxt composables {% #nuxt-composables %}
# Composables {% #composables %}

Composables is a pattern in Nuxt to manage logic related to data fetching and global state management.
Create a file `src/composables/useUserSession.js` in your composables directory. Add the following code:
Composables is a design pattern in Vue and Nuxt to manage logic related to data fetching and global state management.
You can think of a composable as a way to put pieces of code that do specific tasks into neat little boxes that you can use over and over again in you app.

In the user session composable will put all the logic related to user authentication, such as login, logout and authentication status.
It will be available for access in all pages and components.

Create your composable for the user session logic by adding the file `src/composables/useUserSession.js`.
Add the following code.

```js
import { ID } from 'appwrite'
import { ref } from 'vue'
import { account } from '/appwrite'

const current = ref(null)
const isLoggedIn = ref(null)
const current = ref(null) //Reference to the current user object
const isLoggedIn = ref(null) //Reference to check user status

export const useUserSession = () => {
const register = async (email, password) => {
await account.create(ID.unique(), email, password)
await this.login(email, password)
await account.create(ID.unique(), email, password) //Interaction with the Appwrite backend
await this.login(email, password) //Login the newly created user
}

const login = async (email, password) => {
const authUser = await account.createEmailSession(email, password)
current.value = authUser
isLoggedIn.value = true
navigateTo('/ideas')
const authUser = await account.createEmailSession(email, password) //Interaction with the Appwrite backend
current.value = authUser //Passing user data to the current user reference
isLoggedIn.value = true //Setting user status to true
}

const logout = async () => {
await account.deleteSession('current')
current.value = null
isLoggedIn.value = false
navigateTo('/')
await account.deleteSession('current') //Interaction with the Appwrite backend
current.value = null //Clearing the current user data object
isLoggedIn.value = false //Setting user status to false
}
return {
current,
Expand All @@ -44,16 +48,25 @@ export const useUserSession = () => {
logout,
register,
}
}
```

Now, we can import the `useUserSession` composable in any page or component and use it to login, logout, register a user or keep track of the current user.
The `useUserSession()` function is neatly packed and ready to be reused in our pages and components.

# Login page {% #login-page %}

We will start with building a login page to handle the user sessions.
With the authentication functions handled, we can go on to build a simple login page.
The user interactions will be handled in a form with two input fields for email and password.
Underneath will be a button to login and a button to register a new user.

The values from the inputs will be bound to a `v-model`.
The `v-model`acts like a bridge between your input fields and your Javascript code.
If you change the information with yout code, the input field also changes.
And if you type something in the input field, the information in your code also updates.
They are magically linked together.

Create a new file `src/pages/index.vue` and add the following code.
One thing to notice is that no import statements are needed

Create the form by adding a new file `src/pages/index.vue` and put in the following code.

```vue
<template>
Expand All @@ -67,6 +80,8 @@ Create a new file `src/pages/index.vue` and add the following code.
<li class="form-item">
<label class="label">Email</label>
<div class="input-text-wrapper">

<!-- Input with v-model to link email field to script -->
<input
v-model="userData.email"
type="email"
Expand All @@ -79,6 +94,8 @@ Create a new file `src/pages/index.vue` and add the following code.
<li class="form-item">
<label class="label">Password</label>
<div class="input-text-wrapper">

<!-- Input with v-model to link password field to script -->
<input
v-model="userData.password"
type="password"
Expand All @@ -91,6 +108,8 @@ Create a new file `src/pages/index.vue` and add the following code.
</ul>
<ul class="buttons-list u-margin-block-start-16">
<li class="buttons-list-item">

<!-- Login button -->
<button
class="button is-small u-margin-inline-start-4"
aria-label="Login"
Expand All @@ -100,6 +119,8 @@ Create a new file `src/pages/index.vue` and add the following code.
</button>
</li>
<li class="buttons-list-item">

<!-- Register button -->
<button
class="button is-small is-secondary u-margin-inline-start-4"
aria-label="Register account"
Expand All @@ -116,17 +137,21 @@ Create a new file `src/pages/index.vue` and add the following code.
<script>
export default {
setup() {
//Accessing the user session composable
const user = useUserSession();

//V-model object
const userData = {
email: "",
password: "",
};

//Event handler for logging in
const handleLogin = async () => {
await user.login(userData.email, userData.password);
};

//Event handler for registrering
const handleRegistration = async () => {
await user.register(userData.email, userData.password);
};
Expand All @@ -139,19 +164,19 @@ export default {
},
};
</script>


```

# User section on home page {% #user-section-on-home-page %}
# Home page {% #home-page %}

Finally, we will can modify the `src/pages/index.vue` to show a section for logged in users only:
Users can now register and login to the app.
Let's modify the home page in `src/pages/index.vue` to show the logged in users a secret message.

```vue
<template>
<div>
<!-- Visible if user is logged in -->
<section v-if="user.isLoggedIn.value === true">
<h2>Submit Idea</h2>
<h2>Welcome!</h2>
</section>
<section>
<h2>Hello, idea tracker!</h2>
Expand All @@ -162,6 +187,7 @@ Finally, we will can modify the `src/pages/index.vue` to show a section for logg
<script>
export default {
setup() {
//Accessing the user session composable
const user = useUserSession();

return {
Expand Down

0 comments on commit 6f44f13

Please sign in to comment.