Error when using MdDialogAlert as Individual component
givehug opened this issue · 2 comments
givehug commented
Steps to reproduce
<template>
<div>
<MdDialogAlert
:md-active.sync="first"
md-content="Your post has been deleted!"
md-confirm-text="Cool!"
/>
<MdButton class="md-accent md-raised" @click="first = true">Alert</MdButton>
</div>
</template>
<script>
import Vue from 'vue';
import { MdButton, MdDialogAlert } from 'vue-material/dist/components';
Vue.use(MdButton);
Vue.use(MdDialogAlert);
export default {
data: () => ({
first: false,
second: false
})
};
</script>
render and click on the button
Which browser?
all
What is expected?
no error
What is actually happening?
Unknown custom element: <md-dialog-content> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Unknown custom element: <md-dialog-actions> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Thoughts
I guess I have import and register md-dialog-content
and md-dialog-actions
myself, but
- how to import
md-dialog-content
andmd-dialog-actions
(sorry but I feel like a blind chicken here, I tied several things likeimport MdDialogContent from 'vue-material/dist/components/MdDialog/MdDialogContent';
, and there are no type definitions) - if I import MdAlert and only use it, shouldn't it just work and not throw errors in runtime? (register all dependencies under the hood if needed)
huffypiet commented
Have you considered where you placed the Vue.use()
huffypiet commented
<template>
<div>
<MdDialogAlert
:md-active.sync="first"
md-content="Your post has been deleted!"
md-confirm-text="Cool!"
/>
<MdButton class="md-accent md-raised" @click="first = true">Alert</MdButton>
</div>
</template>
<script>
export default {
name: "App",
data: () => ({
first: false,
second: false
})
};
</script>
Omitting imports and rather only including Vue.use(VueMaterial) in the entry point, index.js or main.js should cater for all individual use cases without you having to individually import components you wish to use.