Vue3：是否可以将包含组件的 HTML 文件导入 SFC

Question

I have a Form-Component (SFC) that should import a HTML file with Vue components in it.

Form-Component

<template src="../../../views/form-settings.html"></template>

<script setup>
import Button from "./../ui/button/Button.vue";
</script>

HTML File (form-settings.html)

<div>
     <Button>test button</Button>
</div>

package.json

"devDependencies": {
    "@vue/compiler-sfc": "^3.2.31",
    "laravel-mix": "^6.0.6",
    "vue-loader": "^17.0.0"
},
"dependencies": {
    "vue": "^3.2.31",
},

The HTML file gets loaded correctly but the Button-Component in it not. So I get the error: [Vue warn]: Failed to resolve component: Button If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

Answer 1

Yes it is possible.

You can even import the script and style section:

<template src="./template.html"></template>
<style src="./style.css"></style>
<script src="./script.js"></script>

Read it in the docs .

---

I don't know why your code doesn't work, I tried to create a similar demo and it works fine. See it here on Stackblitz

Answer 2

I have now solved the problem myself.

I had to import the components I want to use in the HTML file in app.js and then initialize them with Vue.

import BaseButton from "./components/ui/BaseButton.vue";
app.component("BaseButton", BaseButton);