search

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

Vue3 setup not working #2

Closed P0ppoff closed 3 years ago

P0ppoff commented 3 years ago

Hi folks, thanks for trying to support vue3.

I have tried to use it on my demo app for a meetup.

I’m currently facing an issue while trying to use the lib. I got this error message :

webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:159 [Vue warn]: A plugin must either be a function or an object with an "install" function.
warn @ webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:159
webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:159 [Vue warn]: injection "Symbol(vue-axe)" not found. 
  at <Popup> 
  at <App>
warn @ webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:159
webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:159 [Vue warn]: Unhandled error during execution of setup function 
  at <Popup> 
  at <App>
warn @ webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:159
webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:338 Uncaught TypeError: Cannot read property 'results' of undefined
    at setup (webpack-internal:///./node_modules/vue-axe/dist/vue-axe.esm.js:3193)
    at callWithErrorHandling (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:275)
    at setupStatefulComponent (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:6518)
    at setupComponent (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:6479)
    at mountComponent (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4219)
    at processComponent (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4195)
    at patch (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3822)
    at mountChildren (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3995)
    at processFragment (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4155)
    at patch (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3815)

Please find the repo here to reproduce : https://github.com/Zenika/grenoble-hands-on-vuejs/tree/tests-a11y

ktquez commented 3 years ago

@P0ppoff

Try to use use(VueAxe) on line 11

P0ppoff commented 3 years ago

Thanks a lot ! I haven't seen the diff between import and require object

daniele-bolla commented 2 years ago 

import { createApp, h, Fragment } from "vue";
import App from "./App.vue";
import VueAxe, { VueAxePopup } from "vue-axe";

if (process.env.NODE_ENV === "development") {
  createApp({
    render: () => h(Fragment, [h(App), h(VueAxePopup)]),
  })
    .use(VueAxe)
    .mount("#app");
} else {
  createApp(App).mount("#app");
}