Open
Description
Hello is this compatible with Nuxt 3?
I tried to create a nuxt plugin like this, but without results:
import { defineNuxtPlugin } from "#app";
export default defineNuxtPlugin(async (nuxtApp) => {
if (process.env.NODE_ENV === "development") {
const VueAxe = await import("vue-axe");
nuxtApp.vueApp.use(VueAxe.default);
}
});
Metadata
Metadata
Assignees
Labels
No labels
Activity
mariappan-subramanian commentedon Aug 22, 2022
Any update on this? Would be helpful if there is a guide/example similar to this - https://axe.vue-a11y.com/guide/#nuxt-js
@ktquez
alkstal commentedon Oct 18, 2022
Create a client side plugin,
vue-axe.client.ts
Then you need to render the popup component somewhere in your app for it to display, in a root component or a layout perhaps?
Make sure you only show it after the component has been mounted, the
VueAxePopup
causes an error when server-side rendered.BBoehm commentedon Jul 13, 2023
When using Nuxt with Vite, this can be further simplefied inside the component:
Djeisen642 commentedon Aug 8, 2023
I was able to get it to load, but I was not able to get nuxt to ignore it for production builds. Anyone got any ideas for that? I've tried adding it as a dev-only component, and it didn't load the component, but something is still requiring that the package is added to the bundle.
BBoehm commentedon Aug 23, 2023
Edit: This does not remove it from bundling - see solution from Harm-Nullix below.
@Djeisen642
For me it's really just defining the Plugin and then adding it as described in my last comment (which I just edited, since I needed to move it into the onMounted()).
If that does not work for you, try logging your
import.meta.env.MODE
- I would expect it to be different on a nuxt dev vs nuxt build (=productive environment).Harm-Nullix commentedon Aug 24, 2023
The following setup works fine for me for only included it in development:
nuxt.config.ts :
plugins/a11y.client.ts :
package.json :
And then just always mount it in app.vue :