tygerbytes

<b-navbar fixed="bottom" toggleable="md" type="light" variant="light">
  <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
  <b-navbar-brand to="/">&#x1F3C3; Runby Pace</b-navbar-brand>
  <b-collapse is-nav id="nav_collapse">
    <b-navbar-nav>
      <b-nav-item to="/">Home</b-nav-item>
      <b-nav-item to="/about">About</b-nav-item>
    </b-navbar-nav>
  </b-collapse>
</b-navbar>

tygerbytes

<template>
  ...
  <input type="text"
         v-model="fiveKmRaceTime"
         v-bind:class="{
          'form-control': true,
          'is-invalid': this.invalidRaceTime }"
         placeholder="A recent 5K race time, like 21:30" />
  <div class="invalid-feedback">{{ this.raceTimeValidationMessage }}</div>
  ...

tygerbytes

Rails.application.routes.draw do

  namespace :static_pages, path: '/' do
    get 'about'
    get 'health_check'
  end

  get 'target_pace/calc'

  root 'target_pace#index'

tygerbytes

import Vue from 'vue';
import Router from 'vue-router';

import RunbyPace from '@/components/RunbyPace.vue';
import TargetPace from '@/components/TargetPace.vue';
import About from '@/components/About.vue';

Vue.use(Router);

export default new Router({

tygerbytes

// src/main.js
import router from './router';
...
new Vue({
  render: h => h(App),
  router,
  store,
}).$mount('#app');

tygerbytes

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

tygerbytes

import Vuex from 'vuex';
...
// The library I want to share amongst the components
import RunbyLib from './runbylib';
...
Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    RunbyLib,

tygerbytes

new Vue({
  render: h => h(App),
  router,
  // Provide the store using the "store" option.
  //  this will inject the store instance to all child components.
  store,
}).$mount('#app');

tygerbytes

export default {
  name: 'RunbyPace',
  beforeCreate() {
    this.lib = this.$store.state.RunbyLib;
  },
  ...

tygerbytes

computed: {
  // Don't do this
  missingRaceTime: () => {
    return this.submitted && this.fiveKmRaceTime === '';
  },
  ...