save WIP

not really getting the feel for this, will continue later, need to really learn how this works

cookbook/static/vue/components/Toast.js

@@ -1,12 +0,0 @@
-let toast_mixin = Vue.mixin({
-    methods: {
-        makeToast: function (title, message, variant = null) {
-            this.$bvToast.toast(message, {
-                title: title,
-                variant: variant,
-                toaster: 'b-toaster-top-center',
-                solid: true
-            })
-        }
-    }
-})

cookbook/static/vue/css/vue_app_01.css

@@ -0,0 +1 @@
+#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}

cookbook/static/vue/js/vue_app_01.js

@@ -0,0 +1,91 @@
+(function (e) {
+    function r(r) {
+        for (var n, c, l = r[0], a = r[1], p = r[2], f = 0, s = []; f < l.length; f++) c = l[f], Object.prototype.hasOwnProperty.call(o, c) && o[c] && s.push(o[c][0]), o[c] = 0;
+        for (n in a) Object.prototype.hasOwnProperty.call(a, n) && (e[n] = a[n]);
+        i && i(r);
+        while (s.length) s.shift()();
+        return u.push.apply(u, p || []), t()
+    }
+
+    function t() {
+        for (var e, r = 0; r < u.length; r++) {
+            for (var t = u[r], n = !0, l = 1; l < t.length; l++) {
+                var a = t[l];
+                0 !== o[a] && (n = !1)
+            }
+            n && (u.splice(r--, 1), e = c(c.s = t[0]))
+        }
+        return e
+    }
+
+    var n = {}, o = {vue_app_01: 0}, u = [];
+
+    function c(r) {
+        if (n[r]) return n[r].exports;
+        var t = n[r] = {i: r, l: !1, exports: {}};
+        return e[r].call(t.exports, t, t.exports, c), t.l = !0, t.exports
+    }
+
+    c.m = e, c.c = n, c.d = function (e, r, t) {
+        c.o(e, r) || Object.defineProperty(e, r, {enumerable: !0, get: t})
+    }, c.r = function (e) {
+        "undefined" !== typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {value: "Module"}), Object.defineProperty(e, "__esModule", {value: !0})
+    }, c.t = function (e, r) {
+        if (1 & r && (e = c(e)), 8 & r) return e;
+        if (4 & r && "object" === typeof e && e && e.__esModule) return e;
+        var t = Object.create(null);
+        if (c.r(t), Object.defineProperty(t, "default", {
+            enumerable: !0,
+            value: e
+        }), 2 & r && "string" != typeof e) for (var n in e) c.d(t, n, function (r) {
+            return e[r]
+        }.bind(null, n));
+        return t
+    }, c.n = function (e) {
+        var r = e && e.__esModule ? function () {
+            return e["default"]
+        } : function () {
+            return e
+        };
+        return c.d(r, "a", r), r
+    }, c.o = function (e, r) {
+        return Object.prototype.hasOwnProperty.call(e, r)
+    }, c.p = "";
+    var l = window["webpackJsonp"] = window["webpackJsonp"] || [], a = l.push.bind(l);
+    l.push = r, l = l.slice();
+    for (var p = 0; p < l.length; p++) r(l[p]);
+    var i = a;
+    u.push([0, "chunk-vendors"]), t()
+})({
+    0: function (e, r, t) {
+        e.exports = t("56d7")
+    }, "234a": function (e, r, t) {
+    }, "56d7": function (e, r, t) {
+        "use strict";
+        t.r(r);
+        t("e260"), t("e6cf"), t("cca6"), t("a79d");
+        var n = t("7a23");
+
+        function o(e, r, t, o, u, c) {
+            var l = Object(n["e"])("HelloWorld");
+            return Object(n["d"])(), Object(n["b"])(l, {msg: "Welcome to Your Vue.js App"})
+        }
+
+        var u = {class: "hello"};
+
+        function c(e, r, t, o, c, l) {
+            return Object(n["d"])(), Object(n["b"])("div", u, [Object(n["c"])("h1", null, Object(n["f"])(t.msg), 1)])
+        }
+
+        var l = {name: "HelloWorld", props: {msg: String}};
+        l.render = c;
+        var a = l, p = {name: "App", components: {HelloWorld: a}};
+        t("e825");
+        p.render = o;
+        var i = p;
+        Object(n["a"])(i).mount("#app")
+    }, e825: function (e, r, t) {
+        "use strict";
+        t("234a")
+    }
+});

cookbook/templates/meal_plan.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 {% load i18n %}
 {% load static %}
-
+{% load render_bundle from webpack_loader %}
 {% block title %}{% trans 'Meal-Plan' %}{% endblock %}
 
 {% block extra_head %}
@@ -20,7 +20,12 @@
 
 {% block content %}
 
+    {% render_bundle 'chunk-vendors' %}
+    {% render_bundle 'vue_app_01' %}
+
     <div id="app">
+        <HelloWorld msg="Welcome to Your Vue.js App"/>
+
         <div class="row">
             <div class="col-md-4 offset-md-4">
                 <div class="input-group" style="margin-top: 8px; margin-bottom: 8px">

recipes/settings.py

@@ -73,6 +73,7 @@ INSTALLED_APPS = [
     'rest_framework',
     'rest_framework.authtoken',
     'django_cleanup.apps.CleanupConfig',
+    'webpack_loader',
     'cookbook.apps.CookbookConfig',
 ]
 
@@ -159,6 +160,20 @@ AUTH_PASSWORD_VALIDATORS = [
     },
 ]
 
+# Vue webpack settings
+VUE_DIR = os.path.join(BASE_DIR, 'vue')
+
+WEBPACK_LOADER = {
+    'DEFAULT': {
+        'CACHE': not DEBUG,
+        'BUNDLE_DIR_NAME': 'vue/',  # must end with slash
+        'STATS_FILE': os.path.join(VUE_DIR, 'webpack-stats.json'),
+        'POLL_INTERVAL': 0.1,
+        'TIMEOUT': None,
+        'IGNORE': [r'.+\.hot-update.js', r'.+\.map']
+    }
+}
+
 # Internationalization
 # https://docs.djangoproject.com/en/2.0/topics/i18n/
 

requirements.txt

@@ -28,3 +28,4 @@ beautifulsoup4==4.9.3
 microdata==0.7.1
 django-random-queryset==0.1.3
 Jinja2==2.11.2
+django-webpack-loader==0.7.0

vue/src/App.vue

@@ -1,5 +1,4 @@
 <template>
-  <img alt="Vue logo" src="./assets/logo.png">
   <HelloWorld msg="Welcome to Your Vue.js App"/>
 </template>
 

vue/src/components/HelloWorld.vue

@@ -1,32 +1,7 @@
 <template>
   <div class="hello">
     <h1>{{ msg }}</h1>
-    <p>
+
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
   </div>
 </template>
 
@@ -38,21 +13,3 @@ export default {
   }
 }
 </script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

vue/vue.config.js

@@ -0,0 +1,56 @@
+const BundleTracker = require("webpack-bundle-tracker");
+
+const pages = {
+    'vue_app_01': {
+        entry: './src/main.js',
+        chunks: ['chunk-vendors']
+    },
+}
+
+module.exports = {
+    pages: pages,
+    filenameHashing: false,
+    productionSourceMap: false,
+    publicPath: process.env.NODE_ENV === 'production'
+        ? ''
+        : 'http://localhost:8080/',
+    outputDir: '../cookbook/static/vue/',
+
+    chainWebpack: config => {
+
+        config.optimization
+            .splitChunks({
+                cacheGroups: {
+                    vendor: {
+                        test: /[\\/]node_modules[\\/]/,
+                        name: "chunk-vendors",
+                        chunks: "all",
+                        priority: 1
+                    },
+                },
+            });
+
+        Object.keys(pages).forEach(page => {
+            config.plugins.delete(`html-${page}`);
+            config.plugins.delete(`preload-${page}`);
+            config.plugins.delete(`prefetch-${page}`);
+        })
+
+        config
+            .plugin('BundleTracker')
+            .use(BundleTracker, [{filename: '../vue/webpack-stats.json'}]);
+
+        config.resolve.alias
+            .set('__STATIC__', 'static')
+
+        config.devServer
+            .public('http://localhost:8080')
+            .host('localhost')
+            .port(8080)
+            .hotOnly(true)
+            .watchOptions({poll: 1000})
+            .https(false)
+            .headers({"Access-Control-Allow-Origin": ["*"]})
+
+    }
+};

vue/webpack-stats.json

@@ -0,0 +1 @@
+{"status":"done","chunks":{"chunk-vendors":[{"name":"js/chunk-vendors.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\chunk-vendors.js"}],"vue_app_01":[{"name":"css/vue_app_01.css","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\css\\vue_app_01.css"},{"name":"js/vue_app_01.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\vue_app_01.js"}]}}