Jump to content

User:Plantaest/TestVue.js

From Wikipedia, the free encyclopedia
Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.
// <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>