vue-a11y / vue-axe-next

Accessibility auditing for Vue.js 3 applications using axe-core
https://vue-axe-next.surge.sh/
MIT License
52 stars 3 forks source link

Add example in documentation for vue 3 typescript with import instead of require #6

Open olemarius opened 2 years ago

olemarius commented 2 years ago

Figuring out how to conditionally load vue-axe was a bit tricky, but here's a working example for others who might want to use it on a typescrpt project. It's important to note that if you import VueAxe outside the if development conditional, it'll be added to vendors.js in production (it's huge).

let app = null;
const setupApp = (app: any) => {
    mountWidgets(app, i18n);
    app.use(store);
    app.use(router);
    app.use(i18n);
    app.mount('#app');
};

if (process.env.NODE_ENV === 'development') {
    import('vue-axe').then((res) =>{
        const VueAxe = res.default;
        const VueAxePopup = res.VueAxePopup;
        app = createApp({
            render: () => h(Fragment, [h(App), h(VueAxePopup)]),
        });
        app.use(VueAxe);
        setupApp(app);
    });
} else {
    app = createApp(App);
    setupApp(app);
}
ktquez commented 2 years ago

Thanks @olemarius I'll add to the docs

rdc-112 commented 1 year ago

I'm working on a new Vue3 project and wasted a bit of time trying to get vue-axe to work with Typescript before finding @olemarius comment. It would be really useful to see this appear in the docs soon :)