DEV Community

aaronblondeau
aaronblondeau

Posted on

18 3

Fix Vue 3 "Failed to resolve component" warnings

I am experimenting with an interesting UI Tookit that I found for Vue by Microsoft : https://docs.microsoft.com/en-us/fluent-ui/web-components/integrations/vue.

I started a stock Vue3 Project using the Getting started instructions. I then followed the setup instructions for the Fluent UI components. They worked right away.

Unfortunately, there was an annoying set of errors in the JS console like this:

Failed to resolve component: fluent-button

Image description

It took a ton of searching to find the solution. I wound up having to tweak vite.config.ts to be like this :



import { fileURLToPath, URL } from "url";

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    // Fixes warnings like : Failed to resolve component: fluent-button
    vue({
      template: {
        compilerOptions: {
          // treat all tags with a dash as custom elements
          isCustomElement: (tag) => tag.startsWith("fluent-"),
        },
      },
    }),
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});


Enter fullscreen mode Exit fullscreen mode

I also had a super annoying problem where every ".vue" import made VSCode angry:

Image description

The level of complexity in Vue has been making me more and more concerned lately. Why can't a brand new project work without errors?

For this one I had to add a file called shims-vue.d.ts:



declare module "*.vue";


Enter fullscreen mode Exit fullscreen mode

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (2)

Collapse
 
rimutaka profile image
Max

If those bugs were due to Vue internals, they fixed them. I find Vue 3 quite robust.

Regarding the unregistered component warning, in my case it was because the component was appearing inside the , but was not imported inside .

Collapse
 
anayarojo profile image
Raul Anaya Rojo

In my case, it was the same: I was trying to use q-item-section inside q-card. But thank your comment, I looked into the quasar documentation and noticed that was wrong. I needed to use q-card-section or q-item.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay