Registering auto-animate in nuxt 3

[Tunji-Olakunle]

how do I register the auto-animate library in nuxt 3

this is what I have in my formkit.config.ts, but it is not working.

import { en } from '@formkit/i18n'
import { DefaultConfigOptions } from '@formkit/vue'
import { createAutoAnimatePlugin } from '@formkit/addons'
import '@formkit/themes/windicss'

const config: DefaultConfigOptions = {
  locales: { en },
  locale: 'en',
  plugins: [
    createAutoAnimatePlugin()
  ]
}

export default config

I get this error

[AliQ80]

Hello, I have the same thing with difference of having the "genesis" theme on Nuxt 3.0.0-rc6 , but I get this error:

statusCode: 500,
  fatal: false,
  unhandled: true,
  statusMessage: 'Internal Server Error'
}
[nuxt] [request error] MutationObserver is not defined

So I removed the plugin from formkit.config.ts and now I have this in [autoAnimate.ts] in the plugins folder:

import { autoAnimatePlugin } from '@formkit/auto-animate/vue'

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

so auto animate works when using v-auto-animate but not on the forms created using FormKit such as this example:

<script setup>
import { ref } from 'vue'
const items = ref(["😏","😐","😑","😒","😕", ... ])
function removeItem(toRemove) {
  items.value = items.value.filter((item) => item !== toRemove)
}
</script>

<template>
  <h5>Click emojis to remove them.</h5>
  <ul v-auto-animate>
    <li
      v-for="item in items"
      :key="item"
      @click="removeItem(item)"
    >
      {{ item }}
    </li>
  </ul>
</template>

what am I missing here to make it work for FormKit forms in Nuxt 3?

thank you

[Tunji-Olakunle]

@AliQ80

so I tried this and it worked for me, first I registered the plugin in autoAnimate.ts as you did and I did this

<script setup lang="ts">
import autoAnimate from '@formkit/auto-animate'

    const ccform = ref()

    const formStyles = ref({
        outer: 'mb-5',
        label: 'block mb-1 font-bold text-xl text-gray-500',
        inner: 'w-full border-b border-gray-900 mb-1 overflow-hidden focus-within:border-ct-blue-500',
        input: 'w-full bg-light-50 sofia h-10 border-none focus:outline-none text-lg text-gray-700 placeholder-gray-400',
        message: 'text-xs text-red-500 font-light'
    })

    

    onMounted(() => {
        ccform.value.querySelectorAll(".formkit-outer").forEach(autoAnimate)
    })

</script>

<template>
    <div class=" " ref="ccform">
        <FormKit 
            type="form"
            id="contact"
            :actions="false"
            @submit="submitForm"
        >
            <FormKit
                type="text"
                label="Name"
                name="fullname"
                validation="required"
                :classes="formStyles"
            />
            <FormKit
                type="email"
                label="Email"
                name="email"
                validation="required|email"
                :classes="formStyles"
            />
            <FormKit
                type="tel"
                label="Phone number"
                :validation="[['required'], ['matches', /^[0-9]{3}[0-9]{4}[0-9]{4}$/]]"
                :validation-messages="{
                    matches: 'Phone number must be in the format xxx-xxxx-xxxx',
                }"
                :classes="formStyles"
            />
            <FormKit
                type="submit"
                label="Send"
                :classes="formStylesSubmit"
            />
        </FormKit>
    </div>
</template>

[AliQ80]

@Tunji-Olakunle

Thank you for sharing you solution, I was able to use it to get my form animation to work, also I was struggling with the applying the styles to multiple elements without having to create a whole tailwind theme.

these two things I searched the docs several times but didn't find a strait forward answer, so I strongly suggest considering these be added to the docs (unless there is a more simple or elegant solution by the creators)

Thank you

[justin-schroeder]

Thanks for pointing this out. It is a bug in the @formkit/addons package specifically. It needs to check for the window context before initializing itself. If you file an issue over on the https://github.com/formkit/formkit repository we can get that worked into beta.11.

[kllpff]

I haven't files formkit.config.ts and auto-animate.ts... Could u help me?