#Tích hợp Vue 2 vào AEM 6.5 Maven Archetype

const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
  // ... các config hiện có

  module: {
    rules: [
      // --- Thêm rule cho .vue files ---
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },

      // Rule JS hiện có (giữ nguyên)
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      },

      // Rule CSS/SCSS hiện có (giữ nguyên)
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  },

  plugins: [
    // --- Thêm VueLoaderPlugin ---
    new VueLoaderPlugin(),
    // ... các plugin hiện có
  ],

  resolve: {
    extensions: ['.js', '.vue'],   // thêm .vue
    alias: {
      'vue$': 'vue/dist/vue.esm.js'  // dùng full build để hỗ trợ template string
    }
  }
};

import Vue from 'vue';

// Import tất cả Vue components
import HelloBanner from './components/HelloBanner.vue';
import AnotherWidget from './components/AnotherWidget.vue';

// Map: data-vue-component="HelloBanner" => component class
const componentRegistry = {
  HelloBanner,
  AnotherWidget,
};

/**
 * Parse props từ data-* attributes của element.
 *
 * HTL render: <div data-vue-component="HelloBanner"
 *                   data-prop-title="My Title"
 *                   data-prop-show-button="true"
 *                   data-prop-items='["a","b","c"]'>
 *
 * Hàm này trả về: { title: "My Title", showButton: true, items: ["a","b","c"] }
 */
function parseProps(el) {
  const props = {};

  Array.from(el.attributes).forEach(attr => {
    // Chỉ lấy data-prop-* attributes
    if (!attr.name.startsWith('data-prop-')) return;

    // "data-prop-show-button" => "showButton" (camelCase)
    const rawKey = attr.name.replace('data-prop-', '');
    const key = rawKey.replace(/-([a-z])/g, (_, c) => c.toUpperCase());

    const rawValue = attr.value;

    // Auto parse JSON (array, object, boolean, number)
    try {
      props[key] = JSON.parse(rawValue);
    } catch {
      props[key] = rawValue; // fallback: coi là string
    }
  });

  return props;
}

/**
 * Tìm tất cả [data-vue-component] trên trang
 * và mount Vue instance tương ứng.
 */
function mountVueComponents() {
  const mountPoints = document.querySelectorAll('[data-vue-component]');

  mountPoints.forEach(el => {
    const componentName = el.getAttribute('data-vue-component');
    const Component = componentRegistry[componentName];

    if (!Component) {
      console.warn(`[Vue AEM] Component not found in registry: "${componentName}"`);
      return;
    }

    const props = parseProps(el);

    new Vue({
      el,
      render: h => h(Component, { props })
    });
  });
}

// Mount sau khi DOM sẵn sàng
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', mountVueComponents);
} else {
  mountVueComponents();
}

import Vue from 'vue';

/**
 * Tự động quét toàn bộ file *.vue trong thư mục components/
 * và build registry mà không cần import thủ công từng file.
 *
 * require.context là tính năng của Webpack — KHÔNG dùng được với Vite/Rollup.
 *
 * Tham số:
 *   - './components'  : thư mục quét
 *   - true            : quét đệ quy các thư mục con
 *   - /\.vue$/        : chỉ lấy file .vue
 */
const requireComponent = require.context(
  './components',  // thư mục
  true,            // recursive
  /\.vue$/         // regex filter
);

// Build registry tự động
// Key = tên file không có extension và đường dẫn con
// Ví dụ: './HelloBanner.vue'     => 'HelloBanner'
//        './cards/CardItem.vue'  => 'CardItem'
const componentRegistry = {};

requireComponent.keys().forEach(filePath => {
  const componentConfig = requireComponent(filePath);
  const Component = componentConfig.default || componentConfig;

  // Lấy tên component từ tên file (bỏ thư mục + bỏ .vue)
  // './cards/CardItem.vue' => 'CardItem'
  const componentName = filePath
    .split('/')
    .pop()
    .replace(/\.\w+$/, '');

  componentRegistry[componentName] = Component;
});

// Nếu muốn xem registry để debug:
// console.log('[Vue AEM] Registry:', Object.keys(componentRegistry));

// === parseProps và mountVueComponents giữ nguyên ===

function parseProps(el) {
  const props = {};
  Array.from(el.attributes).forEach(attr => {
    if (!attr.name.startsWith('data-prop-')) return;
    const rawKey = attr.name.replace('data-prop-', '');
    const key = rawKey.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
    try {
      props[key] = JSON.parse(attr.value);
    } catch {
      props[key] = attr.value;
    }
  });
  return props;
}

function mountVueComponents() {
  document.querySelectorAll('[data-vue-component]').forEach(el => {
    const componentName = el.getAttribute('data-vue-component');
    const Component = componentRegistry[componentName];

    if (!Component) {
      console.warn(`[Vue AEM] "${componentName}" không có trong registry.`);
      return;
    }

    new Vue({ el, render: h => h(Component, { props: parseProps(el) }) });
  });
}

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', mountVueComponents);
} else {
  mountVueComponents();
}

import Vue from 'vue';
import HelloBanner from './components/HelloBanner.vue';
import AnotherWidget from './components/AnotherWidget.vue';

// parseProps dùng chung
function parseProps(el) {
  const props = {};
  Array.from(el.attributes).forEach(attr => {
    if (!attr.name.startsWith('data-prop-')) return;
    const key = attr.name
      .replace('data-prop-', '')
      .replace(/-([a-z])/g, (_, c) => c.toUpperCase());
    try {
      props[key] = JSON.parse(attr.value);
    } catch {
      props[key] = attr.value;
    }
  });
  return props;
}

/**
 * Helper: mount một component lên tất cả element có selector tương ứng.
 * Dùng khi mỗi component có selector riêng thay vì dùng data-vue-component chung.
 */
function mountComponent(selector, Component) {
  document.querySelectorAll(selector).forEach(el => {
    new Vue({
      el,
      render: h => h(Component, { props: parseProps(el) })
    });
  });
}

function mountAll() {
  // Mỗi component được mount riêng với selector của chính nó.
  // HTL dùng: <div data-cmp="hello-banner" data-prop-title="...">
  mountComponent('[data-cmp="hello-banner"]',  HelloBanner);
  mountComponent('[data-cmp="another-widget"]', AnotherWidget);

  // Hoặc dùng class CSS làm selector
  // mountComponent('.vue-hello-banner', HelloBanner);
}

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', mountAll);
} else {
  mountAll();
}

import Vue from 'vue';

// Singleton event bus
export const EventBus = new Vue();

import Vue from 'vue';
import { EventBus } from './eventBus';
import HeaderNav from './components/HeaderNav.vue';
import ContentBlock from './components/ContentBlock.vue';

const componentRegistry = { HeaderNav, ContentBlock };

function parseProps(el) { /* ... như trên ... */ }

function mountVueComponents() {
  document.querySelectorAll('[data-vue-component]').forEach(el => {
    const name = el.getAttribute('data-vue-component');
    const Component = componentRegistry[name];
    if (!Component) return;

    new Vue({
      el,
      // Cung cấp EventBus cho tất cả instances qua provide/inject
      provide: { EventBus },
      render: h => h(Component, { props: parseProps(el) })
    });
  });
}

document.addEventListener('DOMContentLoaded', mountVueComponents);