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

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

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

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";

Comments

[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 .