<template>
  <div id="root">
    <header role="banner">
      <div class="wrapper">
        <h1
          class="site-title"
          tabindex="0"
        >
          <router-link :to="{ name:'home' }">En Français</router-link>
        </h1>
      </div>
    </header>
    <section role="main-content">
      <div class="wrapper">
        <RouterView />
      </div>
    </section>
    <footer role="tools">
      <p>footer</p>
    </footer>
  </div>
</template>

<script>

// import { mapActions, mapState } from 'vuex'

export default {
  metaInfo: {
    // if no subcomponents specify a metaInfo.title, this title will be used
    title: 'Home',
    // all titles will be injected into this template
    titleTemplate: '%s | En Français',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
    ]
  }
}
</script>

<style lang="scss" scoped>
.container{
  max-width: 1200px;
}
</style>
