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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

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