Skip to content

Commit 41cc46f

Browse files
author
Evelina Berg
committed
Removed css-styles, added pink.appwrite.io design system.
1 parent 4ecab19 commit 41cc46f

File tree

6 files changed

+183
-163
lines changed

6 files changed

+183
-163
lines changed

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

Lines changed: 30 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -28,16 +28,17 @@ You can start the development server to watch your app update in the browser as
2828
npm run dev
2929
```
3030

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

3333
In Nuxt, directories help organize the codebase and minimize boilerplate. The purpose is
3434
making it easy to find and manage different aspect of your application.
3535

36-
The files added to the `pages` directory will automatically become a route once a default page layout has been
37-
added. After following these three steps, you will have a working app to verify your changes in the development server throughout the tutorial.
36+
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
37+
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.
38+
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.
3839

3940

40-
### 1. Add home page
41+
### 1. Add a page
4142

4243
Create file `src/pages/index.vue` and add the following code:
4344

@@ -50,9 +51,9 @@ Create file `src/pages/index.vue` and add the following code:
5051
```
5152

5253

53-
### 2. Add global layout
54+
### 2. Add a default layout
5455

55-
Add a file `src/layouts/default.vue` and insert the following code:
56+
a file `src/layouts/default.vue` and insert the following code:
5657

5758
```vue
5859
<template>
@@ -66,53 +67,6 @@ export default {
6667
layout: "default",
6768
};
6869
</script>
69-
70-
<style>
71-
body {
72-
margin: 1rem auto;
73-
max-width: 50rem;
74-
background-color: #f4f5f7;
75-
}
76-
77-
button {
78-
width: fit-content;
79-
border: none;
80-
border-radius: 3px;
81-
padding: 0.25rem 0.5rem;
82-
margin-right: 0.25rem;
83-
background-color: #e3356d;
84-
color: #fff;
85-
text-decoration: none;
86-
}
87-
88-
.link-btn {
89-
padding: 0.75rem 1rem;
90-
border-radius: 3px;
91-
background-color: #e3356d;
92-
color: #fff;
93-
text-decoration: none;
94-
font-weight: 500;
95-
}
96-
97-
form {
98-
max-width: 400px;
99-
padding: 1.5rem;
100-
display: grid;
101-
gap: 0.25rem;
102-
}
103-
104-
h1 {
105-
padding: 0.75rem;
106-
}
107-
108-
section {
109-
padding: 0.75rem;
110-
margin-bottom: 1.5rem;
111-
background-color: #fff;
112-
border-radius: 15px;
113-
border: 1px solid #e6e8eb;
114-
}
115-
</style>
11670
```
11771

11872
### 3. Edit app
@@ -128,3 +82,26 @@ Go to `app.vue`, remove `NuxtWelcome`and insert `NuxtPage` wrapped in `NuxtLayou
12882
</div>
12983
</template>
13084
```
85+
86+
87+
### 4. Import layout
88+
89+
Edit `nuxt.config.ts`to import Appwrite's design system to all pages and components.
90+
The classes will be ready to use in the templates through auto-import.
91+
92+
```ts
93+
export default defineNuxtConfig({
94+
app: {
95+
head: {
96+
link: [
97+
{ rel: "stylesheet", href: "https://unpkg.com/@appwrite.io/pink" },
98+
{
99+
rel: "stylesheet",
100+
href: "https://unpkg.com/@appwrite.io/pink-icons",
101+
},
102+
],
103+
},
104+
},
105+
devtools: { enabled: true },
106+
});
107+
```

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,15 +31,16 @@ You can skip optional steps.
3131

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

34-
To use Appwrite in our Nuxt app, we'll need to find our project ID. Find your project's ID in the **Settings** page.
34+
To use Appwrite in our Nuxt app, we'll need to find our project ID. It is located in the **Settings** page.
3535

3636
{% only_dark %}
3737
![Project settings screen](/images/docs/quick-starts/dark/project-id.png)
3838
{% /only_dark %}
3939
{% only_light %}
4040
![Project settings screen](/images/docs/quick-starts/project-id.png)
4141
{% /only_light %}
42-
Create a new file `src/appwrite.js` to hold our Appwrite related code.
42+
43+
Create a new file `src/appwrite.js` for the Appwrite related code.
4344
Only one instance of the `Client()` class should be created per app.
4445
Add the following code to it, replacing `<YOUR_PROJECT_ID>` with your project ID.
4546

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

Lines changed: 65 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
layout: tutorial
33
title: Add authentication
4-
description: Add authentication to your Nuxt application using Appwrite Web SDK.
4+
description: Add authentication to your Nuxt application using Appwrite Web SDK
55
step: 4
66
---
77

@@ -57,45 +57,90 @@ Create a new file `src/pages/index.vue` and add the following code.
5757

5858
```vue
5959
<template>
60-
<div>
61-
<h2>Login/Register</h2>
62-
<form @submit.prevent="handleLogin || handleRegistration">
63-
<input v-model="userData.email" type="email" placeholder="Email" required />
64-
<input v-model="userData.password" type="password" placeholder="Password" required />
65-
<div>
66-
<button @click="handleLogin">Login</button>
67-
<button @click="handleRegistration">Register</button>
68-
</div>
60+
<div class="card u-margin-32">
61+
<h2 class="eyebrow-heading-2">Login/Register</h2>
62+
<form
63+
class="form u-width-full-line u-max-width-500 u-margin-block-start-16"
64+
@submit.prevent="handleLogin || handleRegistration"
65+
>
66+
<ul class="form-list">
67+
<li class="form-item">
68+
<label class="label">Email</label>
69+
<div class="input-text-wrapper">
70+
<input
71+
v-model="userData.email"
72+
type="email"
73+
class="input-text"
74+
placeholder="Email"
75+
required
76+
/>
77+
</div>
78+
</li>
79+
<li class="form-item">
80+
<label class="label">Password</label>
81+
<div class="input-text-wrapper">
82+
<input
83+
v-model="userData.password"
84+
type="password"
85+
class="input-text"
86+
placeholder="Password"
87+
required
88+
/>
89+
</div>
90+
</li>
91+
</ul>
92+
<ul class="buttons-list u-margin-block-start-16">
93+
<li class="buttons-list-item">
94+
<button
95+
class="button is-small u-margin-inline-start-4"
96+
aria-label="Login"
97+
@click="handleLogin"
98+
>
99+
Login
100+
</button>
101+
</li>
102+
<li class="buttons-list-item">
103+
<button
104+
class="button is-small is-secondary u-margin-inline-start-4"
105+
aria-label="Register account"
106+
@click="handleRegistration"
107+
>
108+
Register
109+
</button>
110+
</li>
111+
</ul>
69112
</form>
70113
</div>
71114
</template>
72115

73116
<script>
74117
export default {
75118
setup() {
76-
const user = useUserSession()
119+
const user = useUserSession();
77120

78121
const userData = {
79-
email: '',
80-
password: '',
81-
}
122+
email: "",
123+
password: "",
124+
};
82125

83126
const handleLogin = async () => {
84-
await user.login(userData.email, userData.password)
85-
}
127+
await user.login(userData.email, userData.password);
128+
};
86129

87130
const handleRegistration = async () => {
88-
await user.register(userData.email, userData.password)
89-
}
131+
await user.register(userData.email, userData.password);
132+
};
90133

91134
return {
92135
handleLogin,
93136
handleRegistration,
94137
userData,
95-
}
138+
};
96139
},
97-
}
140+
};
98141
</script>
142+
143+
99144
```
100145

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

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

Lines changed: 16 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -12,20 +12,25 @@ In our app we want to show a navigation bar. We will add it to the `app.vue` com
1212
Update the `app.vue` file:
1313

1414
```vue
15-
<template>
15+
template>
1616
<div>
1717
<NuxtLayout>
18-
<nav>
19-
<h3>Idea Tracker</h3>
20-
<div>
21-
<div v-if="user.isLoggedIn.value === true">
22-
<span>{{ user.current.value.providerUid }}</span>
23-
<button class="link-btn" type="button" @click="user.logout()">
24-
Logout
25-
</button>
26-
</div>
27-
<NuxtLink v-else href="/login" class="link-btn">Login</NuxtLink>
18+
<nav class="main-header u-padding-inline-end-0">
19+
<h3 class="u-stretch eyebrow-heading-1">Idea Tracker</h3>
20+
<div
21+
class="main-header-end u-margin-inline-end-16"
22+
v-if="user.isLoggedIn.value === true"
23+
>
24+
<p>
25+
{{ user.current.value.providerUid }}
26+
</p>
27+
<button class="button" type="button" @click="user.logout()">
28+
Logout
29+
</button>
2830
</div>
31+
<NuxtLink v-else href="/login" class="button u-margin-inline-end-16"
32+
>Login</NuxtLink
33+
>
2934
</nav>
3035
<NuxtPage />
3136
</NuxtLayout>
@@ -43,21 +48,4 @@ export default {
4348
},
4449
};
4550
</script>
46-
47-
<style scoped>
48-
nav {
49-
display: flex;
50-
justify-content: space-between;
51-
align-items: center;
52-
margin: 1rem;
53-
}
54-
h3 {
55-
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
56-
"Open Sans", "Helvetica Neue", sans-serif;
57-
font-weight: 400;
58-
}
59-
span {
60-
margin-right: 0.25rem;
61-
}
62-
</style>
6351
```

0 commit comments

Comments
 (0)