seance/views/index.vue

<template>
  <div id="app">
    <nav class="navbar has-background-light" role="navigation" aria-label="main navigation">
      <div class="navbar-brand">
        <a class="navbar-item is-size-5" href="/">Seance</a>

        <a role="button" class="navbar navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarMain">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>

      <div id="navbarMain" class="navbar-menu">
        <div class="navbar-start">
          <a class="navbar-item">Home</a>
        </div>
      </div>

      <div class="navbar-end">
        <div class="navbar-item">
          <div class="button is-primary" v-if="user">{{ user.name }}</div>
          <div class="button is-primary" v-else>Sign in</div>
        </div>
      </div>
    </nav>

    <div class="container">
      <h1 class="title">{{ title }}</h1>
      <p>{{ message }}</p>
    </div>

  </div>
</template>

<script>
  export default {
    name: 'Seance',
    data () {
      return {
        title: 'Seance',
        message: 'Hi there',
        user: null,
      }
    }
  }
</script>

<style lang="scss">
  @import "../node_modules/bulma/bulma.sass"
</style>