wip

docs-build/js/advanced/advanced-1.vue

@@ -47,44 +47,44 @@
 </template>
 
 <script>
-    import VueContext from 'vue-context';
-    import 'vue-context/src/sass/vue-context.scss';
+import VueContext from 'vue-context';
+import 'vue-context/src/sass/vue-context.scss';
 
-    const items = [
-        'Cras justo odio',
-        'Dapibus ac facilisis in',
-        'Morbi leo risus',
-        'Porta ac consectetur ac',
-        'Vestibulum at eros'
-    ];
+const items = [
+    'Cras justo odio',
+    'Dapibus ac facilisis in',
+    'Morbi leo risus',
+    'Porta ac consectetur ac',
+    'Vestibulum at eros'
+];
 
-    export default {
-        components: { VueContext },
+export default {
+    components: { VueContext },
 
-        computed: {
-            showReset () {
-                return this.items.length < items.length;
-            },
+    computed: {
+        showReset () {
+            return this.items.length < items.length;
+        },
+    },
+
+    data () {
+        return {
+            items: [...items]
+        };
+    },
+
+    methods: {
+        alertName(name) {
+            alert(`You clicked on "${name}"!`);
         },
 
-        data () {
-            return {
-                items: [...items]
-            };
+        remove(index) {
+            this.$delete(this.items, index);
         },
 
-        methods: {
-            alertName(name) {
-                alert(`You clicked on "${name}"!`);
-            },
-
-            remove(index) {
-                this.$delete(this.items, index);
-            },
-
-            reset() {
-                this.items = [...items];
-            },
+        reset() {
+            this.items = [...items];
         },
-    };
+    },
+};
 </script>

docs-build/js/advanced/index.js

@@ -0,0 +1,16 @@
+import Vue from 'vue';
+import Advanced1 from './advanced-1';
+import Advanced2 from './advanced-2';
+
+// Need a separate vue app for each of these so we can render the markdown properly.
+new Vue({
+    components: {
+        Advanced1,
+    },
+}).$mount('#advanced-1-app');
+
+new Vue({
+    components: {
+        Advanced2,
+    },
+}).$mount('#advanced-2-app');

docs-build/js/index.js

@@ -1,7 +1,6 @@
 import Vue from 'vue';
 import BasicUsage from './basic-usage';
-import Advanced1 from './advanced-1';
-import Advanced2 from './advanced-2';
+
 import NestedMenus from './nested-menus';
 import CloseOnClick from './close-on-click';
 import CloseOnScroll from './close-on-scroll';
@@ -9,8 +8,7 @@ import CloseOnScroll from './close-on-scroll';
 new Vue({
     components: {
         BasicUsage,
-        Advanced1,
-        Advanced2,
+
         NestedMenus,
         CloseOnClick,
         CloseOnScroll,

docs-build/webpack.mix.js

@@ -1,4 +1,8 @@
 const mix = require('laravel-mix');
 
-mix.js('js/index.js', 'dist/vue-context-demos.js')
-    .copy('dist/vue-context-demos.js', __dirname + '/../docs/scripts');
+mix
+    .js('js/index.js', 'dist/vue-context-demos.js')
+    .js('js/advanced/index.js', 'dist/vue-context-advanced-demos.js')
+
+    .copy('dist/vue-context-demos.js', __dirname + '/../docs/scripts')
+    .copy('dist/vue-context-advanced-demos.js', __dirname + '/../docs/scripts');