Add navigation_

Add navigation to your Vue.js app with Appwrite authentication and pinia stores.

1 min read

In our app we want to have a navigation bar that is always visible. Use the user store to show either:

a logout button if the user is logged in.
a login button if the user is not logged in.

Update the App component in src/App.vue:

Markup

<script setup>
import { onMounted } from "vue";
import Home from "./pages/Home.vue";
import Login from "./pages/Login.vue";
import { user } from "./stores/user.js";

const isLoginPage = window.location.pathname === "/login";

onMounted(() => {
  user.init();
});
</script>

<template>
  <div>
    <nav>
      <a href="/">Idea tracker</a>
      <div>
        <template v-if="user.current">
          <span>{{ user.current.email }}</span>
          <button type="button" @click="user.logout()">Logout</button>
        </template>
        <a v-else href="/login">Login</a>
      </div>
    </nav>
    <main>
      <Login v-if="isLoginPage" />
      <Home v-else />
    </main>
  </div>
</template>

Was this page helpful?

Share what worked or what we should fix. Once approved, our agents automatically apply suggested updates to the docs.