very WIP

vue/src/App.vue

@@ -1,25 +0,0 @@
-<template>
-  <HelloWorld msg="Test"/>
-</template>
-
-<script>
-import HelloWorld from './components/HelloWorld.vue'
-
-export default {
-  name: 'App',
-  components: {
-    HelloWorld
-  }
-}
-</script>
-
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>

vue/src/apps/RecipeView/RecipeView.vue

@@ -0,0 +1,49 @@
+<template>
+  <div id="app">
+    <h1>Recipe View</h1>
+
+    {{ recipe }}
+  </div>
+
+</template>
+
+<script>
+import Vue from 'vue'
+import {BootstrapVue} from 'bootstrap-vue'
+
+import 'bootstrap/dist/css/bootstrap.css'
+import 'bootstrap-vue/dist/bootstrap-vue.css'
+
+import {makeToast} from "@/utils/utils.js";
+
+Vue.use(BootstrapVue)
+
+export default {
+  name: 'App',
+  components: {},
+  data() {
+    return {
+      recipe: undefined
+    }
+  },
+  mounted() {
+    makeToast("Error", "Error", "danger")
+    this.loadRecipe(5)
+  },
+  methods: {
+    loadRecipe: function (recipe_id) {
+      fetch(`/api/recipe/${recipe_id}`).then((response) => {
+        this.recipe = response.data;
+      }).catch((err) => {
+        console.log(err)
+      })
+    }
+
+  }
+}
+</script>
+
+<style>
+
+
+</style>

vue/src/apps/RecipeView/main.js

@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import App from './RecipeView.vue'
+
+Vue.config.productionTip = false
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app')

vue/src/components/TestComponent.vue

@@ -1,14 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'TestComponent',
-  props: {
-    msg: String
-  }
-}
-</script>

vue/src/components/ToastComponent.vue

@@ -0,0 +1,27 @@
+<template>
+
+</template>
+
+<script>
+import Vue from 'vue'
+
+import {BootstrapVue} from 'bootstrap-vue'
+
+Vue.use(BootstrapVue)
+
+export default {
+  name: "ToastComponent",
+  methods: {
+    this.$bvToast.toast(message, {
+      title: title,
+      variant: variant,
+      toaster: 'b-toaster-top-center',
+      solid: true
+    })
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

vue/src/main.js

@@ -1,4 +0,0 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-
-createApp(App).mount('#app')

vue/src/test.js

@@ -1,3 +0,0 @@
-export function myOtherTestFunction(n) {
-    return n
-}

vue/src/utils.js

@@ -1,9 +0,0 @@
-export {myOtherTestFunction} from './test.js'
-
-import TestComponent from './components/TestComponent'
-
-
-export function myCustomTestFunction(x) {
-    console.log(x)
-    return x
-}

vue/src/utils/utils.js

@@ -0,0 +1,11 @@
+import { BToast } from 'bootstrap-vue'
+
+export function makeToast(title, message, variant = null) {
+    let toaster = new BToast()
+    toaster.$bvToast.toast(message, {
+        title: title,
+        variant: variant,
+        toaster: 'b-toaster-top-center',
+        solid: true
+    })
+}