diff --git a/cookbook/templates/test.html b/cookbook/templates/test.html
index 4fd33e9e..79ceb0a6 100644
--- a/cookbook/templates/test.html
+++ b/cookbook/templates/test.html
@@ -7,7 +7,7 @@
 {% block content %}
 
     <div id="app">
-        <recipe-view></recipe-view>
+        <recipe-view recipe_id="5"></recipe-view>
     </div>
 
 {% endblock %}
@@ -16,6 +16,10 @@
 {% block script %}
     <script src="{% url 'javascript-catalog' %}"></script>
 
+    <script type="application/javascript">
+        window.RECIPE_ID = 5;
+    </script>
+
     {% render_bundle 'chunk-vendors' %}
     {% render_bundle 'recipe_view' %}
 {% endblock %}
\ No newline at end of file
diff --git a/vue/src/apps/RecipeView/RecipeView.vue b/vue/src/apps/RecipeView/RecipeView.vue
index b8e97d2b..cc991696 100644
--- a/vue/src/apps/RecipeView/RecipeView.vue
+++ b/vue/src/apps/RecipeView/RecipeView.vue
@@ -18,13 +18,10 @@ import {BootstrapVue} from 'bootstrap-vue'
 import 'bootstrap-vue/dist/bootstrap-vue.css'
 
 import {makeToast} from "@/utils/utils.js";
-//import {gettext} from "@/utils/jsi18n";
 
 const _ = window.gettext
 
 import Step from "@/components/Step";
-import axios from "axios";
-
 
 Vue.use(BootstrapVue)
 
@@ -38,6 +35,7 @@ const store = new Vuex.Store({
   }
 })
 
+import {apiLoadRecipe} from "@/utils/django";
 
 export default {
   name: 'RecipeView',
@@ -48,29 +46,24 @@ export default {
   data() {
     return {
       loading: true,
+      recipe_id: window.RECIPE_ID,
       recipe: undefined,
       servings: 1,
     }
   },
   mounted() {
-    //makeToast("Error", "Error", "danger")
-    this.loadRecipe(5)
-    console.log(_('Error'))
+    this.loadRecipe(this.recipe_id)
   },
   methods: {
     loadRecipe: function (recipe_id) {
-      axios.get(`/api/recipe/${recipe_id}`).then((response) => {
-
-        this.recipe = response.data;
-        this.loading = false;
-      }).catch((err) => {
-        console.log(err)
-        makeToast('Error', 'There was an error loading a resource!', 'danger')
+      apiLoadRecipe(recipe_id).then(recipe => {
+        this.recipe = recipe
+        this.loading = false
       })
     }
-
   }
 }
+
 </script>
 
 <style>
diff --git a/vue/src/apps/RecipeView/main.js b/vue/src/apps/RecipeView/main.js
index 8a74f50e..07916bf0 100644
--- a/vue/src/apps/RecipeView/main.js
+++ b/vue/src/apps/RecipeView/main.js
@@ -4,5 +4,5 @@ import App from './RecipeView.vue'
 Vue.config.productionTip = false
 
 new Vue({
-  render: h => h(App),
+    render: h => h(App),
 }).$mount('#app')
diff --git a/vue/src/utils/django.js b/vue/src/utils/django.js
new file mode 100644
index 00000000..f49f26e1
--- /dev/null
+++ b/vue/src/utils/django.js
@@ -0,0 +1,12 @@
+import axios from "axios";
+import {makeToast} from "@/utils/utils";
+
+
+export function apiLoadRecipe(recipe_id) {
+    return axios.get(`/api/recipe/${recipe_id}`).then((response) => {
+        return response.data
+    }).catch((err) => {
+        console.log(err)
+        makeToast('Error', 'There was an error loading a resource!', 'danger')
+    })
+}
diff --git a/vue/webpack-stats.json b/vue/webpack-stats.json
index f7ee347b..a56daaad 100644
--- a/vue/webpack-stats.json
+++ b/vue/webpack-stats.json
@@ -1 +1 @@
-{"status":"done","publicPath":"http://localhost:8080/","chunks":{"chunk-vendors":[{"name":"js/chunk-vendors.js","publicPath":"http://localhost:8080/js/chunk-vendors.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\chunk-vendors.js"}],"recipe_view":[{"name":"js/recipe_view.js","publicPath":"http://localhost:8080/js/recipe_view.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\recipe_view.js"}]},"error":"ModuleError","message":"Module Error (from ./node_modules/eslint-loader/index.js):\n\nF:\\Developement\\Django\\recipes\\vue\\src\\apps\\RecipeView\\RecipeView.vue\n  58:17  error  '_' is not defined  no-undef\n\n✖ 1 problem (1 error, 0 warnings)\n"}
\ No newline at end of file
+{"status":"done","publicPath":"http://localhost:8080/","error":"ModuleError","message":"Module Error (from ./node_modules/eslint-loader/index.js):\n\nF:\\Developement\\Django\\recipes\\vue\\src\\apps\\RecipeView\\RecipeView.vue\n  47:11  error  'root_element' is not defined  no-undef\n\n✖ 1 problem (1 error, 0 warnings)\n","chunks":{"chunk-vendors":[{"name":"js/chunk-vendors.js","publicPath":"http://localhost:8080/js/chunk-vendors.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\chunk-vendors.js"}],"recipe_view":[{"name":"js/recipe_view.js","publicPath":"http://localhost:8080/js/recipe_view.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\recipe_view.js"},{"name":"recipe_view.85b0fba40931a99bbc77.hot-update.js","publicPath":"http://localhost:8080/recipe_view.85b0fba40931a99bbc77.hot-update.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\recipe_view.85b0fba40931a99bbc77.hot-update.js"}]}}
\ No newline at end of file
diff --git a/vue/yarn.lock b/vue/yarn.lock
index 5a172601..26fa6cf0 100644
--- a/vue/yarn.lock
+++ b/vue/yarn.lock
@@ -3179,6 +3179,11 @@ dir-glob@^2.0.0, dir-glob@^2.2.2:
   dependencies:
     path-type "^3.0.0"
 
+django-js-reverse@^0.10.1-a.0:
+  version "0.10.1-a.0"
+  resolved "https://registry.yarnpkg.com/django-js-reverse/-/django-js-reverse-0.10.1-a.0.tgz#ff915561930d3292c7e33c8b4d6f10ae8cecc8a0"
+  integrity sha512-t0lHG4LMjkpXBtRL6oQwBX1S5aygZgddQ4IEhTX9icRvRcGv2sx5zyrf1sKj6e8xtO7boibzWI94bSphoG6llw==
+
 dns-equal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npm.taobao.org/dns-equal/download/dns-equal-1.0.0.tgz#b39e7f1da6eb0a75ba9c17324b34753c47e0654d"