drupal-caravane/web/themes/custom/caravane/assets/js/main.js

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 CaravaneTheme = function () {
    const _is_front = drupalSettings.path.isFront
    console.log('drupalSettings', drupalSettings)

    // let _I18n

    //  ___      _ _
    // |_ _|_ _ (_) |_
    //  | || ' \| |  _|
    // |___|_||_|_|\__|
    function init () {
      console.log('CaravaneTheme 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 CaravaneTheme()

  CaravaneTheme()
})(Drupal, drupalSettings)