Thành viên:Plantaest/TestVue.js

Chú ý: Sau khi lưu thay đổi trang, bạn phải xóa bộ nhớ đệm của trình duyệt để nhìn thấy các thay đổi. Google Chrome, Firefox, Internet Explorer và Safari: Giữ phím ⇧ Shift và nhấn nút Reload/Tải lại trên thanh công cụ của trình duyệt. Để biết chi tiết và hướng dẫn cho các trình duyệt khác, xem Trợ giúp:Xóa bộ nhớ đệm.

// <nowiki>
if (
	mw.config.values.wgCanonicalNamespace === 'Special'
    && mw.config.values.wgCanonicalSpecialPageName === 'Blankpage'
    && mw.config.values.wgTitle.endsWith('/Vue')
) {
    mw.loader.using(['vue', '@wikimedia/codex']).then(function (require) {
        const Vue = require('vue');
        const Codex = require('@wikimedia/codex');

        const store = Vue.reactive({
            count: 0,
            increment() {
                this.count++;
            },
        });

        const App = Vue.createMwApp({
            template: `
            <component-a/>
            <component-b/>
            `,
        });

        App.component('component-a', {
            template: `
            <div style="margin-bottom: 1rem">
              <cdx-button action="progressive" type="primary" @click="store.increment()">
                From A: {{ store.count }}
              </cdx-button>
            </div>
            `,
            setup: () => ({ store }),
            components: {
                CdxButton: Codex.CdxButton,
            },
        });

        App.component('component-b', {
            template: `
            <div>
              <cdx-button @click="store.increment()">
                From B: {{ store.count }}
              </cdx-button>
            </div>
            `,
            setup: () => ({ store }),
            components: {
                CdxButton: Codex.CdxButton,
            },
        });

        App.mount('#content');
    });
}
// </nowiki>