Как создать суперсет veutify для расширения базовой функциональности

Question

Я пытаюсь создать библиотеку компонентов на основе плагинов, чтобы обеспечить согласованность между несколькими линейками продуктов, используя veutify. Однако, установив библиотеку и добавив компоненты, я получаю несколько ошибок, касающихся темной темы.

В библиотеке компонентов и в целевой линейке продуктов установлена ​​программа veutfy через 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>

^ Компонент из библиотеки

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>

^ Ошибки выданы

vuetify Версия 1.5.14

Answer 1

Вы установили цвет темы? И где? В случае отрицательного, в соответствии с документацией :

Vuetify поддерживает как светлые, так и темные варианты дизайна материалов. спекуляция Это обозначение начинается с корневого компонента приложения, v-app и поддерживается большинством компонентов. По умолчанию ваш приложение будет использовать светлую тему, но это может быть легко перезаписывается добавлением темной опоры.

<v-app dark>

Если вы не хотите настраивать все одним цветом, вы можете передать, например, реквизит с именем dark для компонентов, чтобы они использовали темную тему:

<v-menu dark>

Документация по компоненту меню