histoire
histoire copied to clipboard
[Vue warn]: Failed to resolve component: HstText
Describe the bug
When we use the HstText
element to add control to our story, We have a warn output :
[Vue warn]: Failed to resolve component: HstText
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
Reproduction
Just use a HstText in our story like this :
<template>
<Story title="Components/Forms/AqZxcvbn">
<aq-zxcvbn
:label="state.label"
:variant="state.variant"
:prepend-inner-icon="state.prependInnerIcon" />
<template #controls>
<HstText
v-model="state.variant"
title="Variant" />
<HstText
v-model="state.label"
title="Label" />
<HstText
v-model="state.prependInnerIcon"
title="Prepend inner icon" />
</template>
</Story>
</template>
<script>
import { reactive } from 'vue';
import AqZxcvbn from '@/components/forms/AqZxcvbn.vue';
export default {
components : {
AqZxcvbn,
},
setup() {
const state = reactive({
variant : 'outlined',
label : 'password',
prependInnerIcon : 'mdi-lock',
});
return {
state,
};
},
};
</script>
System Info
System:
OS: macOS 12.4
CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
Memory: 221.93 MB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node
npm: 8.13.1 - ~/.nvm/versions/node/v16.15.0/bin/npm
Browsers:
Chrome: 104.0.5112.101
Edge: 104.0.1293.54
Firefox: 102.0
Firefox Developer Edition: 69.0
Safari: 15.5
npmPackages:
@histoire/plugin-vue: 0.10.3 => 0.10.3
@vitejs/plugin-vue: 3.0.3 => 3.0.3
histoire: 0.10.3 => 0.10.3
vite: 3.0.8 => 3.0.8
Used Package Manager
npm
Validations
- [X] Follow our Code of Conduct
- [X] Read the Contributing Guidelines.
- [X] Read the docs.
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion.
- [X] The provided reproduction is a minimal reproducible example of the bug.
Please provide a runnable reproduction, thanks!