I am currently working on developing a plugin-based component library to ensure consistency across various product lines using vuetify. However, when I try to install the library and add the components, I encounter multiple errors related to the dark theme.
Both the component library and the target product line have vuetify installed via the vue-cli.
<template>
<div class="module-wrap">
<v-card v-bind="$attrs" v-on="$listeners" :class="`dashboard-module units`">
<v-toolbar flat dense :color="color">
<v-toolbar-title>{{title}}</v-toolbar-title>
<v-spacer></v-spacer>
<v-menu v-bind="$attrs" v-on="$listeners" class="menu" offset-y>
<template v-slot:activator="{ on }">
<v-btn class="menu-opener" icon v-on="on">
<font-awesome-icon icon="ellipsis-h"></font-awesome-icon>
</v-btn>
</template>
<v-list>
<v-list-tile class="tooltip" @click="dialog = true">
<v-list-tile-avatar>
<font-awesome-icon icon="info"/>
</v-list-tile-avatar>
<v-list-tile-content>
<v-list-tile-title>Information</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile class="favorite" @click="$emit('favorite')">
<v-list-tile-avatar>
<font-awesome-icon icon="star"/>
</v-list-tile-avatar>
<v-list-tile-content>
<v-list-tile-title>Save To Favorites</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile class="export" v-if="!disableExport" @click="$emit('export')">
<v-list-tile-avatar>
<font-awesome-icon icon="file-export"/>
</v-list-tile-avatar>
<v-list-tile-content>
<v-list-tile-title>Export</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-menu>
</v-toolbar>
<div :class="`content`">
<slot></slot>
</div>
<v-card-text>
<slot name="card-text"></slot>
</v-card-text>
<v-dialog v-model="dialog" width="500">
<v-card>
<v-card-title>
<div class="headline">{{title}}</div>
</v-card-title>
<v-card-text>
<slot name="tooltip"></slot>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn @click="dialog = false" flat color="primary">Ok</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-card>
</div>
</template>
<script lang="ts">
export default {
// props:['color', 'module', 'title'],
props: {
color:String,
title:String,
disableExport:Boolean
},
data() {
return {
dialog:false
}
}
}
</script>
<style scoped>
.dashboard-module {
overflow: hidden;
display: flex;
flex-direction: column;
height: 100%;
}
.content {
overflow-y: auto;
overflow-x: hidden;
max-height: 100%;
}
</style>
^ Component from library
webpack-internal:///./node_modules/dashboard-components/node_modules/vue/dist/vue.runtime.esm.js:620 [Vue warn]: Error in render: "TypeError: Cannot read property 'dark' of undefined"
found in
---> <VMenu>
<TDashboardModule>
<App> at src/App.vue
<Root>
TypeError: Cannot read property 'dark' of undefined[Vue warn]: Error in getter for watcher "isDark": "TypeError: Cannot read property 'dark' of undefined"
found in
---> <ThemeProvider>
<VDialog>
<TDashboardModule>
<App> at src/App.vue
<Root>
^ Encountered Issues
vuetify Version 1.5.14