Skip to content
  • Sponsor vue-a11y/vue-axe-next

  • Notifications You must be signed in to change notification settings
  • Fork 4

Nuxt 3 compatibility #9

Open
Open
@CKGrafico

Description

@CKGrafico

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);
  }
});

Activity

mariappan-subramanian

mariappan-subramanian commented on Aug 22, 2022

@mariappan-subramanian

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

alkstal commented on Oct 18, 2022

@alkstal

Create a client side plugin, vue-axe.client.ts

import vueAxe from 'vue-axe';

export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.vueApp.use(vueAxe);
});

Then you need to render the popup component somewhere in your app for it to display, in a root component or a layout perhaps?

<script setup lang="ts">
import { VueAxePopup } from 'vue-axe';
const config = useAppConfig();
const showAxePopup = ref(false);

onMounted(() => {
    showAxePopup.value = config.isDevelopment;
});
</script>

<template>
  /* Other markup excluded... */
  <VueAxePopup v-if="showAxePopup" />
</template>

Make sure you only show it after the component has been mounted, the VueAxePopup causes an error when server-side rendered.

BBoehm

BBoehm commented on Jul 13, 2023

@BBoehm

When using Nuxt with Vite, this can be further simplefied inside the component:

<script setup lang="ts">
  import { VueAxePopup } from 'vue-axe';
  const showAxePopup = ref(false);

  onMounted(() => {
    showAxePopup.value = import.meta.env.MODE === 'development';
  });
</script>

<template>
  <VueAxePopup v-if="showAxePopup" />
</template>
Djeisen642

Djeisen642 commented on Aug 8, 2023

@Djeisen642

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

BBoehm commented on Aug 23, 2023

@BBoehm

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()).

// plugins/axe.client.ts
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueAxe);
});

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

Harm-Nullix commented on Aug 24, 2023

@Harm-Nullix

The following setup works fine for me for only included it in development:
nuxt.config.ts :

export default defineNuxtConfig({
  vite: {
    optimizeDeps: { include: [...(process.env.NODE_ENV === 'development' ? ['axe-core'] : [])] },
  },
  runtimeConfig: {
    public: {
      env: process.env.NODE_ENV || 'development',
    }
  },
})

plugins/a11y.client.ts :

import { useRawConfig } from '~/frontend/composables/useConfig'

export default defineNuxtPlugin(async (nuxtApp) => {
  const config = useRuntimeConfig()
  if (config.public.env === 'development') {
    // @ts-ignore import has no types
    void import('vue-axe').then((vueAxe) => {
      nuxtApp.vueApp.component('VueAxePopup', vueAxe.VueAxePopup)
      nuxtApp.vueApp.use(vueAxe.default, {
        auto: false,
      })
    })
  } else {
    nuxtApp.vueApp.component('VueAxePopup', h('div'))
  }
})

package.json :

{
  "devDependencies": {
    "axe-core": "4.7.2",
    "nuxt": "3.6.5",
    "vue-axe": "3.1.2",
  },
}

And then just always mount it in app.vue :

<template>
  <nuxt-layout>
    <nuxt-loading-indicator />
    <nuxt-page />
    <vue-axe-popup />
  </nuxt-layout>
</template>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      Nuxt 3 compatibility · Issue #9 · vue-a11y/vue-axe-next