localization in vue apps working

cookbook/templates/test.html

@@ -14,6 +14,12 @@
 
 
 {% block script %}
+    <script src="{% url 'javascript-catalog' %}"></script>
+
+    <script>
+        console.log(gettext('Error'))
+    </script>
+
     {% render_bundle 'chunk-vendors' %}
     {% render_bundle 'recipe_view' %}
 {% endblock %}

vue/package.json

@@ -12,7 +12,8 @@
     "bootstrap-vue": "^2.21.2",
     "core-js": "^3.6.5",
     "vue": "^2.6.11",
-    "vue-template-compiler": "^2.6.12"
+    "vue-template-compiler": "^2.6.12",
+    "vuex": "^3.6.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
@@ -22,7 +23,6 @@
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^7.0.0-0",
-    "vuex": "^3.6.0",
     "webpack-bundle-tracker": "0.4.3"
   },
   "eslintConfig": {

vue/src/apps/RecipeView/RecipeView.vue

@@ -15,10 +15,13 @@
 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";
+//import {gettext} from "@/utils/jsi18n";
+
+const _ = window.gettext
+
 import Step from "@/components/Step";
 import axios from "axios";
 
@@ -52,7 +55,7 @@ export default {
   mounted() {
     //makeToast("Error", "Error", "danger")
     this.loadRecipe(5)
-
+    console.log(_('Error'))
   },
   methods: {
     loadRecipe: function (recipe_id) {
@@ -62,6 +65,7 @@ export default {
         this.loading = false;
       }).catch((err) => {
         console.log(err)
+        makeToast('Error', 'There was an error loading a resource!', 'danger')
       })
     }
 

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"},{"name":"recipe_view.2e57c38f0490ab82e173.hot-update.js","publicPath":"http://localhost:8080/recipe_view.2e57c38f0490ab82e173.hot-update.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\recipe_view.2e57c38f0490ab82e173.hot-update.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  7:36  error  Expected 'v-bind:key' directive to use the variables which are defined by the 'v-for' directive  vue/valid-v-for\n  8:19  error  'i' is defined but never used                                                                    vue/no-unused-vars\n  8:39  error  Expected 'v-bind:key' directive to use the variables which are defined by the 'v-for' directive  vue/valid-v-for\n\n✖ 3 problems (3 errors, 0 warnings)\n"}
+{"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"}