import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

Vue.config.productionTip = false
Vue.component('font-awesome-icon', FontAwesomeIcon)

library.add(faUserSecret)

Vue.use(VueRouter)

const Home = { template: '<div>temp</div>' }

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: () => import('./views/About.vue') },
  { path: '/submitArtwork', component: () => import('./views/submitArtwork.vue') },
]

const router = new VueRouter({
  routes
})

new Vue({
    router,
    render: h => h(App),
}).$mount('#app')

<template>
  <div id="app">

    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/submitArtwork">Submit Artwork</router-link>
    </div>

    <img alt="Vue logo" src="./assets/logo.png">
      <HelloWorld msg="Welcome to Your Vue.js App"/>
    <transition
        name="fade"
        mode="out-in"
    ></transition>
      <router-view/>

      <v-facebook-login app-id="966242223397117"></v-facebook-login>

  </div>
</template>

<script>

import HelloWorld from './components/HelloWorld.vue'
import About from './components/about.vue'
import VFacebookLogin from 'vue-facebook-login-component'

export default {
  name: 'app',
  components: {
    HelloWorld,
    VFacebookLogin,
    About
  },
}

</script>

<style>
...
</style>