vue 3 lottie-player 无法解析组件

Question

I am trying to use lottie-player in my vue 3 project but I always get the Warning that Vue failed to resolve the component lottie-player. I am following the official docs of lottieFiles ( https://lottiefiles.com/web-player ). The only browser that is not working is Chrome on iOS, for all other tested browsers and operating systems it only throws that warning but it works anyway.

I tried all kind of npm packages but i didn't find any working one for me. My latest idea is to try detecting chrome on iOS and show a different animation there. But of course it would be nice if anyone had a solution for my problem so that I don't get that warning. I mean it would suck if there is no propper way to use lottieFiles in Vue 3, right? lottie docs Vue warning

Answer 1

For anyone struggling with Vite2x+ change your vite.config.js file accordingly:

import { fileURLToPath, URL } from 'url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue({
    template: {
      compilerOptions: { //✅ here
        isCustomElement: tag => tag === 'lottie-player'
      }
    }
  }) ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

Answer 2

As lottie-player is a Web Component you should declare it to compiler options.

Check this Custom Elements Interop

If you use vue-cli pass config through chainWebpack

check this Vue CLI config

Answer 3

I'm currently updating the LottieFiles vue-lottie-player to work with Vue3 and as we wrap the lottie-web player, I was running in to this exact warning too!

Managed to remove it by adding

isCustomElement: tag => tag === 'lottie-player'

inside my vue.config.js file. Heres the full config, you can ignore all the other things:

//Compiler options
const path = require(`path`);

module.exports = {
    configureWebpack: {
        resolve: {
            symlinks: false,
            alias: {
                vue: path.resolve(`./node_modules/vue`)
            }
        }
    },
    chainWebpack: config => {
        config.resolve.alias.set('vue', '@vue/compat')

        config.module
            .rule('vue')
            .use('vue-loader')
            .tap(options => {
                return {
                    ...options,
                    compilerOptions: {
                        compatConfig: {
                            MODE: 2
                        },
                        isCustomElement: tag => tag === 'lottie-player'
                    }
                }
            })
    }
}

Link to the vue player: https://github.com/LottieFiles/lottie-vue