added decoupled custom module, started mathallo theme, not tested yet

web_main/themes/custom/mathallo/assets/dist/main.css

@@ -0,0 +1 @@
+body{background-color:red}

web_main/themes/custom/mathallo/assets/js/api/json-axios.js

@@ -0,0 +1,32 @@
+import axios from 'axios'
+
+// https://github.com/alvar0hurtad0/drupal-vuejs-todo/blob/master/frontend/src/api/axiosInterceptor.js
+
+// console.log('drupalSettings', drupalSettings)
+console.log(window.location)
+
+const JSONAPI = axios.create({
+  baseURL: `${window.location.origin}/jsonapi`,
+  withCredentials: true,
+  headers: {
+    Accept: 'application/vnd.api+json'
+    // Authorization: 'Basic {token}',
+    // 'Content-Type': 'application/json'
+  }
+})
+
+JSONAPI.interceptors.response.use(
+  response => {
+    return Promise.resolve(response)
+  },
+  error => {
+    const { status } = error.response
+    console.warn('error in json-axios', status)
+    // if (status === 403) {
+    //   window.location = '/'
+    // }
+    return Promise.reject(error)
+  }
+)
+
+export default JSONAPI

web_main/themes/custom/mathallo/assets/js/api/rest-axios.js

@@ -0,0 +1,45 @@
+import axios from 'axios'
+
+// https://github.com/alvar0hurtad0/drupal-vuejs-todo/blob/master/frontend/src/api/axiosInterceptor.js
+
+// console.log('drupalSettings', drupalSettings)
+// console.log('window.location.origin', window.location.origin)
+
+// axios.interceptors.response.use(
+//   response => {
+//     return Promise.resolve(response)
+//   },
+//   error => {
+//     const { status } = error.response
+//     console.warn('error in rest-axios', status)
+//     if (status === 403) {
+//       window.location = '/'
+//     }
+//     return Promise.reject(error)
+//   }
+// )
+
+const REST = axios.create({
+  baseURL: `${window.location.origin}`,
+  withCredentials: true,
+  headers: {
+    // Authorization: 'Bearer {token}',
+    'Content-Type': 'application/json'
+  }
+})
+
+REST.interceptors.response.use(
+  response => {
+    return Promise.resolve(response)
+  },
+  error => {
+    const { status } = error.response
+    console.warn('error in rest-axios', status)
+    // if (status === 403) {
+    //   window.location = '/'
+    // }
+    return Promise.reject(error)
+  }
+)
+
+export default REST

web_main/themes/custom/mathallo/assets/js/main.js

@@ -0,0 +1,109 @@
+import { createApp } from 'vue'
+import '../scss/main.scss'
+import Etape from './vuejs/Etape.vue'
+
+import REST from './api/rest-axios'
+
+
+
+// /**
+//  * @file
+//  * reha behaviors.
+//  * https://www.drupal.org/docs/drupal-apis/javascript-api/javascript-api-overview
+//  */
+// (function (Drupal) {
+
+//   'use strict';
+
+//   Drupal.behaviors.reha = {
+//     attach: function (context, settings) {
+//       console.log('It works!');
+//     }
+//   };
+
+// } (Drupal));
+
+(function (Drupal, drupalSettings) {
+  const MathalloTheme = function () {
+    const _is_front = drupalSettings.path.isFront
+    console.log('drupalSettings', drupalSettings)
+
+    // let _I18n
+
+    //  ___      _ _
+    // |_ _|_ _ (_) |_
+    //  | || ' \| |  _|
+    // |___|_||_|_|\__|
+    function init () {
+      console.log('MathalloTheme init()')
+      initVues()
+    }
+
+    function initVues(){
+      // initVueEtapeModale();
+
+
+    }
+
+    // function initVueEtapeModale(){
+    //   createApp(Etape).mount('#etape-modale');
+
+    //   processEtapeLinks();
+    // }
+
+
+    // function onClickEtapeLink(e){
+    //   e.preventDefault();
+      
+    //   let a = e.currentTarget;
+    //   let nid = a.dataset.nodeNid;
+    //   console.log(nid);
+
+    //   getNodeData(nid);
+
+    //   return null;
+    // }
+
+
+    // function processEtapeLinks(){
+    //   let etape_link_fields = document.querySelectorAll('#etapes-liste div.views-field-title');
+    //   etape_link_fields.forEach((field, index) => {
+    //     let nid = null;
+    //     let classList = field.classList;
+    //     classList.forEach((classe) => {
+    //       let reg = /data-node-(\d+)/;
+    //       let result = classe.match(reg);
+    //       if (result) {
+    //         nid = result[1];
+    //         console.log(nid);
+    //       }
+    //     })
+        
+    //     if (nid) {
+    //       let a = field.querySelector('a');
+    //       a.setAttribute('data-node-nid', nid);
+    //       a.addEventListener('click', onClickEtapeLink);
+    //     }
+        
+        
+    //   })
+    // }
+    
+    // function getNodeData(nid){
+    //   const params = {
+    //   }
+    //   REST.get(`/node/${nid}?_format=json`, params)
+    //   .then((data) => {
+    //     console.log('user REST getUser data', data)
+    //   })
+    //   .catch(error => {
+    //     console.warn('Issue with getNodedata', error)
+    //     Promise.reject(error)
+    //   })
+    // }
+
+    init()
+  } // end MathalloTheme()
+
+  MathalloTheme()
+})(Drupal, drupalSettings)

web_main/themes/custom/mathallo/assets/js/vuejs/Etape.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    hello HMR TROP TROP BIEN \o/
+  </div>
+</template>
+
+<script>
+  
+</script>
+
+<style>
+
+</style>

web_main/themes/custom/mathallo/assets/scss/main.scss

@@ -0,0 +1,3 @@
+body{
+  background-color: purple;
+}