The app will have three pages:

• The login page with a Sign in with Google button
• The main Geolocated Blog page with the map
• A "not found" page

We will now create the main component and set up those pages with bare components:

1. Create a new src/components folder and copy the NotFound.vue component from Chapter 5, Project 3 - Support Center .
2. Then add the App.vue file with the router-view component and the main stylus file:

      <template>
        <div class="app">
          <router-view />
        </div>
      </template>

      <style lang="stylus">
      @import '../styles/main';
      </style>

3. Add the GeoBlog.vue file, which will be pretty bare for now:

      <template>
        <div class="geo-blog">
          <!-- More to come -->
        </div>
      </template>

4. Add the Login.vue file with the Sign in with Google button. The button calls an openGoogleSignin method:

      <template>
        <div class="welcome">
          <h1>Welcome</h1>

          <div class="actions">
            <button @click="openGoogleSignin">
              Sign in with Google
            </button>
          </div>
        </div>
      </template>

      <script>
      export default {
        methods: {
          openGoogleSignin () {
            // TODO
          },
        },
      }
      </script>

5. Create a router.js file similar to what we did in Chapter 5 , Project 3 - Support Center. It will contain the three routes:

      import Vue from 'vue'
      import VueRouter from 'vue-router'

      import Login from './components/Login.vue'
      import GeoBlog from './components/GeoBlog.vue'
      import NotFound from './components/NotFound.vue'

      Vue.use(VueRouter)

      const routes = [
        { path: '/', name: 'home', component: GeoBlog,
          meta: { private: true } },
        { path: '/login', name: 'login', component: Login },
        { path: '*', component: NotFound },
      ]

      const router = new VueRouter({
        routes,
        mode: 'history',
        scrollBehavior (to, from, savedPosition) {
          if (savedPosition) {
            return savedPosition
          }
          if (to.hash) {
            return { selector: to.hash }
          }
          return { x: 0, y: 0 }
        },
      })

      // TODO Navigation guards

      // We will get to that soon

      export default router

The router should be already imported in the main file and injected in the application. We are now ready to continue!