2

Intro: I've generated two projects with vue-cli ~4.2.0:

  • parent-app - main project
  • dummylib - library which is imported by parent-app. Has a bunch of .vue components inside. I want to use vuetify here

Example of library component, where i utilize <v-btn>:

    <script>
    import { mapActions, mapGetters } from 'vuex'
    import { VBtn } from 'vuetify/lib'

    export default {
      name: 'DummyButton',

      components: {
        VBtn
      },

      computed: {
        ...mapGetters([
          'counter'
        ]),

        text () {
          return `I have been clicked ${this.counter}`
        }
      },

      methods: {
        ...mapActions([
          'increment'
        ])
      }
    }
    </script>

    <template>
      <v-btn color='primary' @click="increment">{{ text }}</v-btn>
    </template>

Problem: <v-btn> renders, but on each click i get errors in console:

  • [Vue warn]: $attrs is readonly.
  • [Vue warn]: $listeners is readonly.

Library's vue.config.js:

module.exports = {
  configureWebpack: {
    ...(process.env.NODE_ENV === 'production'
      ? {
        externals: {
          'vuetify/lib': 'vuetify/lib'
        }
      }
      : {}),

    resolve: {
      alias: {
        vue$: 'vue/dist/vue.common.js'
      }
    }
  }
}
KrasnokutskiyEA
  • 587
  • 1
  • 6
  • 20

0 Answers0