tested shared Vuex store, created d8 userblock, enabled JSONAPI module

composer.json

@@ -33,6 +33,7 @@
         "drupal/console": "^1.0.2",
         "drupal/core": "^8.6.0",
         "drupal/entity_clone": "^1.0",
+        "drupal/jsonapi": "^2.4",
         "drupal/login_history": "1.x-dev",
         "drupal/mailgun": "1.x-dev",
         "drupal/mailsystem": "^4.1",

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "493ce32d7cd55035c10e59679a42f6da",
+    "content-hash": "4d94cbba5e34b10c72cf4a4fe45ca88f",
     "packages": [
         {
             "name": "alchemy/zippy",
@@ -6435,6 +6435,70 @@
                 "source": "http://cgit.drupalcode.org/interval"
             }
         },
+        {
+            "name": "drupal/jsonapi",
+            "version": "2.4.0",
+            "source": {
+                "type": "git",
+                "url": "https://git.drupalcode.org/project/jsonapi.git",
+                "reference": "8.x-2.4"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://ftp.drupal.org/files/projects/jsonapi-8.x-2.4.zip",
+                "reference": "8.x-2.4",
+                "shasum": "5f710c1c602378748fa3b21ceec0977de62359ed"
+            },
+            "require": {
+                "drupal/core": "^8.5.11"
+            },
+            "require-dev": {
+                "drupal/schemata": "1.x-dev#8325d172e1d6880aa24073f8f751ef089282cf9a",
+                "drupal/schemata_json_schema": "*",
+                "justinrainbow/json-schema": "^5.2"
+            },
+            "type": "drupal-module",
+            "extra": {
+                "branch-alias": {
+                    "dev-2.x": "2.x-dev"
+                },
+                "drupal": {
+                    "version": "8.x-2.4",
+                    "datestamp": "1553554702",
+                    "security-coverage": {
+                        "status": "covered",
+                        "message": "Covered by Drupal's security advisory policy"
+                    }
+                }
+            },
+            "notification-url": "https://packages.drupal.org/8/downloads",
+            "license": [
+                "GPL-2.0+"
+            ],
+            "authors": [
+                {
+                    "name": "Wim Leers",
+                    "homepage": "https://www.drupal.org/user/99777"
+                },
+                {
+                    "name": "dawehner",
+                    "homepage": "https://www.drupal.org/user/99340"
+                },
+                {
+                    "name": "e0ipso",
+                    "homepage": "https://www.drupal.org/user/550110"
+                },
+                {
+                    "name": "gabesullice",
+                    "homepage": "https://www.drupal.org/user/2287430"
+                }
+            ],
+            "description": "Provides a JSON API standards-compliant API for accessing and manipulating Drupal content and configuration entities.",
+            "homepage": "https://www.drupal.org/project/jsonapi",
+            "support": {
+                "source": "https://git.drupalcode.org/project/jsonapi"
+            }
+        },
         {
             "name": "drupal/kint",
             "version": "2.0.0",
@@ -14061,12 +14125,12 @@
             "version": "v1.6.5",
             "source": {
                 "type": "git",
-                "url": "https://github.com/mikey179/vfsStream.git",
+                "url": "https://github.com/bovigo/vfsStream.git",
                 "reference": "d5fec95f541d4d71c4823bb5e30cf9b9e5b96145"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/mikey179/vfsStream/zipball/d5fec95f541d4d71c4823bb5e30cf9b9e5b96145",
+                "url": "https://api.github.com/repos/bovigo/vfsStream/zipball/d5fec95f541d4d71c4823bb5e30cf9b9e5b96145",
                 "reference": "d5fec95f541d4d71c4823bb5e30cf9b9e5b96145",
                 "shasum": ""
             },

config/sync/block.block.userblock.yml

@@ -0,0 +1,20 @@
+uuid: f6ac7bc7-be23-4375-a237-1d9a36edb17e
+langcode: en
+status: true
+dependencies:
+  module:
+    - user_block
+  theme:
+    - materiotheme
+id: userblock
+theme: materiotheme
+region: header_right
+weight: 0
+provider: null
+plugin: user_block
+settings:
+  id: user_block
+  label: 'User block'
+  provider: user_block
+  label_display: visible
+visibility: {  }

config/sync/core.entity_form_display.user.user.default.yml

@@ -3,12 +3,12 @@ langcode: en
 status: true
 dependencies:
   config:
+    - field.field.user.user.commerce_remote_id
     - field.field.user.user.field_company
     - field.field.user.user.field_member_type
     - field.field.user.user.field_memo
     - field.field.user.user.field_showroom
   module:
-    - path
     - user
 id: user.user.default
 targetEntityType: user
@@ -21,7 +21,7 @@ content:
     settings: {  }
     third_party_settings: {  }
   contact:
-    weight: 6
+    weight: 8
     region: content
     settings: {  }
     third_party_settings: {  }
@@ -35,7 +35,7 @@ content:
     type: entity_reference_autocomplete
     region: content
   field_member_type:
-    weight: 8
+    weight: 4
     settings: {  }
     third_party_settings: {  }
     type: options_select
@@ -58,12 +58,12 @@ content:
     type: entity_reference_autocomplete
     region: content
   language:
-    weight: 4
+    weight: 5
     region: content
     settings: {  }
     third_party_settings: {  }
   matomo:
-    weight: 5
+    weight: 6
     region: content
     settings: {  }
     third_party_settings: {  }
@@ -73,5 +73,11 @@ content:
     region: content
     settings: {  }
     third_party_settings: {  }
+  simplenews:
+    weight: 7
+    region: content
+    settings: {  }
+    third_party_settings: {  }
 hidden:
+  commerce_remote_id: true
   langcode: true

config/sync/core.entity_view_display.user.user.default.yml

@@ -3,6 +3,7 @@ langcode: en
 status: true
 dependencies:
   config:
+    - field.field.user.user.commerce_remote_id
     - field.field.user.user.field_company
     - field.field.user.user.field_member_type
     - field.field.user.user.field_memo
@@ -16,7 +17,7 @@ bundle: user
 mode: default
 content:
   field_company:
-    weight: 6
+    weight: 3
     label: above
     settings:
       link: true
@@ -24,21 +25,21 @@ content:
     type: entity_reference_label
     region: content
   field_member_type:
-    weight: 9
+    weight: 1
     label: above
     settings: {  }
     third_party_settings: {  }
     type: list_default
     region: content
   field_memo:
-    weight: 8
+    weight: 4
     label: above
     settings: {  }
     third_party_settings: {  }
     type: basic_string
     region: content
   field_showroom:
-    weight: 7
+    weight: 2
     label: above
     settings:
       link: true
@@ -46,11 +47,14 @@ content:
     type: entity_reference_label
     region: content
   member_for:
-    weight: 5
+    weight: 0
+    region: content
     settings: {  }
     third_party_settings: {  }
-    region: content
 hidden:
+  commerce_remote_id: true
   langcode: true
   profile_contact_company: true
+  profile_customer: true
   profile_member: true
+  simplenews: true

config/sync/core.extension.yml

@@ -72,6 +72,7 @@ module:
   image: 0
   inline_entity_form: 0
   interval: 0
+  jsonapi: 0
   kint: 0
   language: 0
   link: 0
@@ -134,6 +135,7 @@ module:
   update: 0
   url_to_video_filter: 0
   user: 0
+  user_block: 0
   video_embed_field: 0
   video_embed_wysiwyg: 0
   views_bulk_edit: 0

config/sync/jsonapi.settings.yml

@@ -0,0 +1,4 @@
+langcode: en
+read_only: true
+_core:
+  default_config_hash: p_qzzTwtOMiIPE7CyG0wD6M-UCpBp6Y5E4LhNCnCRpY

web/modules/custom/user_block/src/Plugin/Block/UserBlock.php

@@ -0,0 +1,83 @@
+<?php
+
+namespace Drupal\user_block\Plugin\Block;
+
+use Drupal\Core\Session\AccountProxy;
+use Drupal\Core\Session\AccountProxyInterface;
+use Drupal\Core\Block\BlockBase;
+use Drupal\Core\Plugin\ContainerFactoryPluginInterface;
+use Symfony\Component\DependencyInjection\ContainerInterface;
+use Drupal\Core\Url;
+
+/**
+ * Provides a 'UserBlock' block.
+ *
+ * @Block(
+ *  id = "user_block",
+ *  admin_label = @Translation("User block"),
+ * )
+ */
+class UserBlock extends BlockBase   implements ContainerFactoryPluginInterface{
+
+    protected $user;
+
+    /**
+     * {@inheritdoc}
+     */
+    public static function create(ContainerInterface $container, array $configuration, $plugin_id, $plugin_definition) {
+      // Instantiates this form class.
+      return new static(
+        $configuration,
+        $plugin_id,
+        $plugin_definition,
+        $container->get('current_user')
+      );
+    }
+
+    /**
+    * @param array $configuration
+    * @param string $plugin_id
+    * @param mixed $plugin_definition
+    * @param \Drupal\Core\Session\AccountProxyInterface $account
+    */
+    public function __construct(array $configuration, $plugin_id, $plugin_definition, AccountProxyInterface $account) {
+      parent::__construct($configuration, $plugin_id, $plugin_definition);
+      $this->user = $account;
+    }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function build() {
+    $build = [];
+    // dpm($this->user);
+    if($this->user->id()){
+      $user_url = Url::fromRoute('entity.user.canonical', ['user' => $this->user->id()]);
+      $build['user-link'] = array(
+        '#title' => $this->user->getEmail(),
+        '#type' => 'link',
+        '#url' => $user_url,
+        '#options'=>array(
+          'attributes' => array(
+            'data-drupal-link-system-path' => $user_url->getInternalPath(),
+            'alt' => t('User account'),
+          )
+        )
+      );
+      $logout_url = Url::fromRoute('user.logout');
+      $build['user-logout'] = array(
+        '#title' => t('Logout'),
+        '#type' => 'link',
+        '#url' => $logout_url,
+        '#options'=>array(
+          'attributes' => array(
+            'data-drupal-link-system-path' => $logout_url->getInternalPath(),
+            'alt' => t('Logout'),
+          )
+        )
+      );
+    }
+    return $build;
+  }
+
+}

web/modules/custom/user_block/user_block.info.yml

@@ -0,0 +1,5 @@
+name: 'user_block'
+type: module
+description: 'Provide a block with user name/email and logout link'
+core: 8.x
+package: 'Custom'

web/modules/custom/user_block/user_block.module

@@ -0,0 +1,24 @@
+<?php
+
+/**
+ * @file
+ * Contains user_block.module.
+ */
+
+use Drupal\Core\Routing\RouteMatchInterface;
+
+/**
+ * Implements hook_help().
+ */
+// function user_block_help($route_name, RouteMatchInterface $route_match) {
+//   switch ($route_name) {
+//     // Main module help for the user_block module.
+//     case 'help.page.user_block':
+//       $output = '';
+//       $output .= '<h3>' . t('About') . '</h3>';
+//       $output .= '<p>' . t('Provide a block with user name/email and logout link') . '</p>';
+//       return $output;
+//
+//     default:
+//   }
+// }

web/themes/custom/materiotheme/assets/scripts/main.js

@@ -1,40 +1,67 @@
 import Vue from 'vue'
 import store from 'vuejs/store'
 import VUserBlock from 'vuejs/components/User/UserBlock'
+import VTestContent from 'vuejs/components/Content/Test'
+
+import { mapState } from 'vuex'
 
 // require('theme/assets/styles/main.scss');
 import 'theme/assets/styles/main.scss'
 
 (function(Drupal, drupalSettings) {
 
-  var v_user_block = new Vue({
-    store,
-    render: h => h(VUserBlock)
-  }).$mount('#block-userlogin')
-
-
   var MaterioTheme = function(){
+
+    var v_user_block, v_test_content;
     // var _is_front = drupalSettings.path.isFront;
 
+
+    console.log('drupalSettings', drupalSettings);
+
     //  ___      _ _
     // |_ _|_ _ (_) |_
     //  | || ' \| |  _|
     // |___|_||_|_|\__|
     function init(){
-      console.log("MaterioTheme init()");
+      console.log("MaterioTheme init()")
+      initVues()
+    }
+
+    function initVues(){
+      initUserVBlock()
+      initTestVContent()
+    }
 
-    };
+    function initUserVBlock(){
+      let mount_point = drupalSettings.user.uid !== 0 ? '#block-userblock' : '#block-userlogin';
+      v_user_block = new Vue({
+        store,
+        computed: {
+          ...mapState({
+            isloggedin: state => state.User.isloggedin
+          })
+        },
+        created () {
+          if(drupalSettings.user.uid !== 0){
+            this.$store.commit('User/setUid', drupalSettings.user.uid)
+            this.$store.dispatch('User/getUser')
+          }
+        },
+        render: h => h(VUserBlock)
+      }).$mount(mount_point)
+    }
 
+    function initTestVContent(){
+      v_test_content = new Vue({
+        store,
+        render: h => h(VTestContent)
+      }).$mount('#block-pagetitle')
+      console.log('initTestVContent', v_test_content);
+    }
 
-    init();
+    init()
   } // end MaterioTheme()
 
-  // $(document).ready(function($) {
-  //   if(drupalSettings.path.isFront){
-      var materiotheme = new MaterioTheme();
-  //   }else{
-  //     $('body').attr('booted', 'booted');
-  //   }
-  // });
+  var materiotheme = new MaterioTheme();
 
 })(Drupal, drupalSettings);

web/themes/custom/materiotheme/vuejs/api/json-axios.js

@@ -0,0 +1,14 @@
+import axios from 'axios'
+
+// https://github.com/alvar0hurtad0/drupal-vuejs-todo/blob/master/frontend/src/api/axiosInterceptor.js
+
+// console.log('drupalSettings', drupalSettings);
+
+export const JSONAPI = axios.create({
+  baseURL: `http://dev.materio.com/jsonapi`,
+  headers: {
+    Accept: 'application/vnd.api+json'
+    // Authorization: 'Bearer {token}',
+    // "Content-Type": "application/json"
+  }
+})

web/themes/custom/materiotheme/vuejs/rest/http-axios.js → web/themes/custom/materiotheme/vuejs/api/rest-axios.js

@@ -4,7 +4,7 @@ import axios from 'axios'
 
 // console.log('drupalSettings', drupalSettings);
 
-export const HTTP = axios.create({
+export const REST = axios.create({
   baseURL: `http://dev.materio.com`,
   headers: {
     Authorization: 'Bearer {token}',

web/themes/custom/materiotheme/vuejs/components/Content/Test.vue

@@ -0,0 +1,22 @@
+<template lang="html">
+  <div id="block-pagetitle" class="">
+    <h1>Test Shared Store ( logged in: {{ isloggedin }} )</h1>
+    <h2 v-if="isloggedin">Shared store is working</h2>
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex'
+
+export default {
+  computed: {
+    ...mapState({
+      token: state => state.User.token,
+      isloggedin: state => state.User.isloggedin
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

web/themes/custom/materiotheme/vuejs/components/User/UserBlock.vue

@@ -1,5 +1,5 @@
 <template lang="html">
-  <UserTools v-if="token" />
+  <UserTools v-if="isloggedin" />
   <Login v-else />
 </template>
 
@@ -15,7 +15,7 @@ export default {
   // },
   computed: {
     ...mapState({
-      token: state => state.User.token
+      isloggedin: state => state.User.isloggedin
     })
   },
   components: {

web/themes/custom/materiotheme/vuejs/store/modules/user.js

@@ -1,4 +1,5 @@
-import { HTTP } from 'vuejs/rest/http-axios'
+import { REST } from 'vuejs/api/rest-axios'
+import { JSONAPI } from 'vuejs/api/json-axios'
 import qs from 'querystring'
 
 export default {
@@ -10,8 +11,8 @@ export default {
     // username: '',
     mail:'',
     token: null,
-    logout_token: null
-    // isloggedin: false
+    logout_token: null,
+    isloggedin: false
   },
 
   // getters
@@ -19,31 +20,64 @@ export default {
 
   // mutations
   mutations : {
-    setUser (state, data) {
+    setToken (state, data) {
       state.uid = data.current_user.uid
       // state.username = data.username
       state.mail = data.current_user.mail
       state.token = data.csrf_token
+      state.isloggedin = true
       state.logout_token = data.logout_token
     },
+    setUid (state, uid) {
+      state.uid = uid
+      state.isloggedin = true
+    },
+    setUser (state, data) {
+      state.mail = data.mail[0].value
+      state.uuid = data.uuid[0].value
+    },
     setLoggedOut (state) {
       state.uid= null
       state.mail = ''
       state.token = null
+      state.isloggedin = false
       state.logout_token = null
     }
   },
 
   // actions
   actions : {
-    getToken ({ commit, state }, credentials) {
-      HTTP.post('/user/login?_format=json', credentials)
+    getToken ({ dispatch, commit, state }, credentials) {
+      REST.post('/user/login?_format=json', credentials)
+        .then(({ data }) => {
+          console.log('user getToken data', data)
+          commit('setToken', data)
+          dispatch('getUser')
+        })
+        .catch(( error ) => {
+            console.warn('Issue with login', error)
+            Promise.reject(error)
+        })
+    },
+    getUser ({ commit, state }) {
+      let params = {
+        token: state.token
+      }
+      REST.get(`/user/${state.uid}?_format=json`, params)
         .then(({ data }) => {
-          console.log('data', data)
+          console.log('user REST getUser data', data)
           commit('setUser', data)
+          JSONAPI.get(`/user/user/${state.uuid}`)
+            .then(({ data }) => {
+              console.log('user JSONAPI getUser data', data)
+            })
+            .catch(( error ) => {
+                console.warn('Issue with getUser', error)
+                Promise.reject(error)
+            })
         })
         .catch(( error ) => {
-            console.log('Issue with login', error)
+            console.warn('Issue with getUser', error)
             Promise.reject(error)
         })
     },
@@ -51,13 +85,13 @@ export default {
       let credentials = qs.stringify({
         token: state.token
       })
-      HTTP.post('/user/logout', credentials)
+      REST.post('/user/logout', credentials)
         .then((resp) => {
           console.log('resp', resp)
           commit('setLoggedOut')
         })
         .catch(( error ) => {
-            console.log('Issue with logout', error)
+            console.warn('Issue with logout', error)
             Promise.reject(error)
         })
     }