Build an ideas tracker with Nuxt

5

Add navigation

To help our users navigate the app we want it to have a navigation bar that's visible on all pages. We will once again use the useUserSession() composable for information about the current user.

With this piece of information we will show a login button when no user is logged in and a logout button when one is. We will also put the user's e-mail address next to the logout button.

From the components directory, create the file navbar.vue and add the code below.

Vue
<!-- components/navbar.vue -->
<script setup>
const user = useUserSession();
</script>

<template>
  <div>
 <!--- Navbar -->
    <nav class="main-header u-padding-inline-end-0">
      <h3 class="u-stretch eyebrow-heading-1">Idea Tracker</h3>
      <!-- Email and logout button if logged in user -->
      <div
        class="main-header-end u-margin-inline-end-16"
        v-if="user.current.value"
        >
        <p>{{ user.current.providerUid }}</p>
        <button class="button" type="button" @click="user.logout()">
          Logout
        </button>
      </div>
      <!-- Login button if no user logged in -->
      <NuxtLink v-else href="/login" class="button u-margin-inline-end-16">
        Login
      </NuxtLink>
    </nav>
  </div>
</template>

Open app.vue from the root directory and add the navigation bar.

Vue
<!-- app.vue -->

<script setup>
import "@appwrite.io/pink";
import "@appwrite.io/pink-icons";
</script>

<template>
  <div>
    <NuxtLayout>
      <!-- Add navbar -->
      <Navbar />
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

Have a look in the browser at both the main page and the login page to test the new functionality.