Effectively start the project

src/App.vue

@@ -0,0 +1,34 @@
+<template>
+  <div id="app">
+    <navbar></navbar>
+    <router-view/>
+  </div>
+</template>
+
+<script>
+import navbar from './components/navbar'
+export default {
+  name: 'app',
+  components: {
+    'navbar': navbar
+  }
+}
+</script>
+
+<style>
+#app {
+  text-align: center;
+}
+#nav {
+  padding: 30px;
+}
+
+#nav a {
+  font-weight: bold;
+  color: #2c3e50;
+}
+
+#nav a.router-link-exact-active {
+  color: #42b983;
+}
+</style>

src/components/navbar.vue

@@ -0,0 +1,30 @@
+<template>
+  <b-navbar toggleable="md" variant="light">
+
+    <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
+
+    <b-navbar-brand href="#">
+      <font-awesome-icon icon="file-invoice-dollar" />
+    </b-navbar-brand>
+
+    <b-collapse is-nav id="nav_collapse">
+      <b-navbar-nav>
+        <b-nav-item :to="{ name: 'home' }">Comptes</b-nav-item>
+        <b-nav-item :to="{ name: 'import' }">Import</b-nav-item>
+        <b-nav-item :to="{ name: 'postes' }">Postes</b-nav-item>
+      </b-navbar-nav>
+    </b-collapse>
+
+  </b-navbar>
+</template>
+
+<script>
+export default {
+  name: 'navbar',
+  props: {
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/main.js

@@ -0,0 +1,32 @@
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
+
+import BootstrapVue from 'bootstrap-vue'
+import 'bootstrap/dist/css/bootstrap.css'
+import 'bootstrap-vue/dist/bootstrap-vue.css'
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faCar, faChargingStation, faUtensils, faFileInvoiceDollar
+} from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+
+library.add(
+  faCar, faChargingStation, faUtensils, faFileInvoiceDollar
+)
+
+console.log(library.definitions.fas)
+
+Vue.component('font-awesome-icon', FontAwesomeIcon)
+
+Vue.use(BootstrapVue)
+
+Vue.config.productionTip = false
+
+new Vue({
+  router,
+  store,
+  render: h => h(App)
+}).$mount('#app')

src/router.js

@@ -0,0 +1,31 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import Home from './views/Home.vue'
+
+Vue.use(Router)
+
+export default new Router({
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: Home
+    },
+    {
+      path: '/import',
+      name: 'import',
+      // route level code-splitting
+      // this generates a separate chunk (import.[hash].js) for this route
+      // which is lazy-loaded when the route is visited.
+      component: () => import(/* webpackChunkName: "import" */ './views/import.vue')
+    },
+    {
+      path: '/postes',
+      name: 'postes',
+      // route level code-splitting
+      // this generates a separate chunk (postes.[hash].js) for this route
+      // which is lazy-loaded when the route is visited.
+      component: () => import(/* webpackChunkName: "postes" */ './views/postes.vue')
+    }
+  ]
+})

src/store.js

@@ -0,0 +1,16 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+
+  },
+  mutations: {
+
+  },
+  actions: {
+
+  }
+})

src/views/Home.vue

@@ -0,0 +1,20 @@
+<template>
+    <div class="home">
+      <h1>Comptes </h1>
+    </div>
+</template>
+
+<script>
+// @ is an alias to /src
+export default {
+  name: 'home',
+  components: {
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+  }
+}
+</script>

src/views/icons_test.vue

@@ -0,0 +1,32 @@
+<template>
+    <div class="home">
+        <b-form-input v-model="icon_name"
+                      type="text"
+                      placeholder="Enter icon name">
+        </b-form-input>
+        <p>
+          Value: {{ icon_name }} -> <font-awesome-icon :icon="icon_name" />
+        </p>
+        <p>{{ available_icons }}</p>
+    </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import { library } from '@fortawesome/fontawesome-svg-core'
+export default {
+  name: 'home',
+  components: {
+  },
+  data () {
+    return {
+      icon_name: 'coffee'
+    }
+  },
+  computed: {
+    available_icons () {
+      return Object.keys(library.definitions.fas)
+    }
+  }
+}
+</script>

src/views/import.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="import">
+    <h1>Import</h1>
+  </div>
+</template>

src/views/postes.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="postes">
+    <h1>Postes</h1>
+  </div>
+</template>