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.
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);
You can even import the script and style section:
<template src="./template.html"></template>
<style src="./style.css"></style>
<script src="./script.js"></script>
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