added more components

docroot/modules/custom/vue_js_example/src/Plugin/Block/VueArticlesBlock.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace Drupal\vue_js_example\Plugin\Block;
+
+use Drupal\Core\Block\BlockBase;
+
+/**
+ * Provides a 'VueArticlesBlock' block.
+ *
+ * @Block(
+ *  id = "vue_articles_block",
+ *  admin_label = @Translation("Vue articles block"),
+ * )
+ */
+class VueArticlesBlock extends BlockBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  public function build() {
+    $build = [];
+    $build['#theme'] = 'vue_articles_block';
+     $build['vue_articles_block']['#markup'] = 'Implement VueArticlesBlock.';
+
+    return $build;
+  }
+
+}

docroot/themes/custom/vue_js/dist/js/articles.js

@@ -0,0 +1,17 @@
+document.addEventListener('DOMContentLoaded', function () {
+  'use strict';
+
+  drupalSettings.articles = new Vue({ // eslint-disable-line no-unused-vars, no-undef, max-len
+    el: '#vue-articles',
+    data: {
+      articles: []
+    },
+    mounted: function mounted() {
+      var _this = this;
+
+      axios.get('/jsonapi/node/article?page[limit]=15').then(function (response) {
+        return _this.articles = response.data.data;
+      });
+    }
+  });
+});

docroot/themes/custom/vue_js/dist/js/collapsible.js

@@ -1,4 +1,4 @@
-!function (document, Drupal, $) {
+!function (document, Drupal) {
   'use strict';
 
   Drupal.behaviors.drupalVueCollapsible = {
@@ -14,4 +14,4 @@
       });
     }
   };
-}(document, Drupal, jQuery);
+}(document, Drupal);

docroot/themes/custom/vue_js/dist/js/modal-non-vue.js

@@ -4,21 +4,15 @@
   Drupal.behaviors.drupalVueModal = {
     attach: function attach(context) {
 
-      var modal = context.querySelector('#non-vue-modal');
-      var modalButton = context.querySelector('#non-vue-modal-button');
-      var modalCloseButton = context.querySelector('#non-vue-modal .modal__close');
+      $('#non-vue-modal-button', context).on('click', function (e) {
+        e.preventDefault();
+        $('#non-vue-modal .modal__mask').removeClass('hidden');
+      });
 
-      if (modalButton !== null) {
-        modalButton.addEventListener('click', function (e) {
-          e.preventDefault();
-          modal.querySelector('.modal__mask').classList.remove('hidden');
-        });
-
-        modalCloseButton.addEventListener('click', function (e) {
-          e.preventDefault();
-          modal.querySelector('.modal__mask').classList.add('hidden');
-        });
-      }
+      $('#non-vue-modal .modal__close', context).on('click', function (e) {
+        e.preventDefault();
+        $('#non-vue-modal .modal__mask').addClass('hidden');
+      });
     }
   };
 }(document, Drupal, jQuery);

docroot/themes/custom/vue_js/dist/js/modal-vue.js

@@ -1,17 +1,13 @@
 document.addEventListener('DOMContentLoaded', function () {
   'use strict';
 
-  drupalSettings.modal = new Vue({ // eslint-disable-line no-unused-vars, no-undef, max-len
+  new Vue({
     el: '#vue-modal',
     data: {
       showModal: false,
       content: 'Default Modal Text'
     },
     methods: {
-      show: function show(content) {
-        this.showModal = true;
-        this.content = content;
-      },
       close: function close() {
         this.showModal = false;
       }

docroot/themes/custom/vue_js/src/components/articles/articles.es6.js

@@ -0,0 +1,15 @@
+document.addEventListener('DOMContentLoaded', () => {
+  'use strict';
+
+  drupalSettings.articles = new Vue({ // eslint-disable-line no-unused-vars, no-undef, max-len
+    el: '#vue-articles',
+    data: {
+      articles: []
+    },
+    mounted() {
+      axios
+        .get('/jsonapi/node/article?page[limit]=15')
+        .then(response => (this.articles = response.data.data))
+    }
+  });
+});

docroot/themes/custom/vue_js/src/components/collapsible/collapsible.es6.js

@@ -1,4 +1,4 @@
-!((document, Drupal, $) => {
+!((document, Drupal) => {
   'use strict';
 
   Drupal.behaviors.drupalVueCollapsible = {
@@ -15,4 +15,4 @@
     }
   };
 
-})(document, Drupal, jQuery);
+})(document, Drupal);

docroot/themes/custom/vue_js/src/components/modal/modal-non-vue.es6.js

@@ -4,22 +4,15 @@
   Drupal.behaviors.drupalVueModal = {
     attach: function(context) {
 
-      const modal = context.querySelector('#non-vue-modal');
-      const modalButton = context.querySelector('#non-vue-modal-button');
-      const modalCloseButton = context.querySelector('#non-vue-modal .modal__close');
-
-      if (modalButton !== null) {
-        modalButton.addEventListener('click', (e)=> {
-          e.preventDefault();
-          modal.querySelector('.modal__mask').classList.remove('hidden');
-        });
-
-        modalCloseButton.addEventListener('click', (e)=> {
-          e.preventDefault();
-          modal.querySelector('.modal__mask').classList.add('hidden');
-        });
-      }
+      $('#non-vue-modal-button', context).on('click', function (e) {
+        e.preventDefault();
+        $('#non-vue-modal .modal__mask').removeClass('hidden');
+      });
 
+      $('#non-vue-modal .modal__close', context).on('click', function (e) {
+        e.preventDefault();
+        $('#non-vue-modal .modal__mask').addClass('hidden');
+      });
     }
   };
 

docroot/themes/custom/vue_js/src/components/modal/modal-vue.es6.js

@@ -1,17 +1,13 @@
 document.addEventListener('DOMContentLoaded', () => {
   'use strict';
 
-  drupalSettings.modal = new Vue({ // eslint-disable-line no-unused-vars, no-undef, max-len
+  new Vue({
     el: '#vue-modal',
     data: {
       showModal: false,
       content: 'Default Modal Text',
     },
     methods: {
-      show(content) {
-        this.showModal = true;
-        this.content = content;
-      },
       close() {
         this.showModal = false;
       }

docroot/themes/custom/vue_js/src/templates/block/block--vue-articles-block.html.twig

@@ -0,0 +1,55 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a block.
+ *
+ * Available variables:
+ * - plugin_id: The ID of the block implementation.
+ * - label: The configured label of the block if visible.
+ * - configuration: A list of the block's configuration values.
+ *   - label: The configured label for the block.
+ *   - label_display: The display settings for the label.
+ *   - provider: The module or other provider that provided this block plugin.
+ *   - Block plugin specific settings will also be stored here.
+ * - content: The content of this block.
+ * - attributes: array of HTML attributes populated by modules, intended to
+ *   be added to the main container tag of this template.
+ *   - id: A valid HTML ID and guaranteed unique.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - content_attributes: Same as attributes, except applied to the main content
+ *   tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ *
+ * @see template_preprocess_block()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+  'block',
+  'block-' ~ configuration.provider|clean_class,
+  'block-' ~ plugin_id|clean_class,
+]
+%}
+{{ attach_library('vue_js/articles') }}
+<div {{ attributes.addClass(classes) }}>
+  {{ title_prefix }}
+  <h2>Article Titles Vue</h2>
+  {{ title_suffix }}
+  {% block content %}
+    <div id="vue-articles">
+      {% verbatim %}
+        <div class="articles" v-for="article in articles">
+          <div class="article">
+            <a :href="article.attributes.path.alias">{{ article.attributes.title }}</a>
+          </div>
+        </div>
+      {% endverbatim %}
+    </div>
+  {% endblock %}
+</div>

docroot/themes/custom/vue_js/vue_js.libraries.yml

@@ -2,11 +2,17 @@ global:
   css:
     base:
       dist/css/global.css: {}
+  dependencies:
+    - core/drupal
 
 vue-js:
   js:
     https://cdn.jsdelivr.net/npm/vue/dist/vue.js: { type: external }
 
+axios:
+  js:
+    https://unpkg.com/axios/dist/axios.min.js: { type: external }
+
 modal:
   css:
     component:
@@ -15,6 +21,8 @@ modal:
 modal-non-vue:
   js:
     dist/js/modal-non-vue.js: {}
+  dependencies:
+    - core/jquery
 
 modal-vue:
   js:
@@ -36,3 +44,10 @@ collapsible-vue:
     dist/js/collapsible-vue.js: {}
   dependencies:
     - vue_js/vue-js
+
+articles:
+  js:
+    dist/js/articles.js: {}
+  dependencies:
+    - vue_js/axios
+    - vue_js/vue-js