Search code examples
javascriptvue.jsvuejs2vue-componentvue-mixin

Vue.js Import mixin does not import in app


The requested module './clienteMixin.js' does not provide an export named 'default'

Mixin

export const myMixin = {
    data() {
        return {
            loading: false,
        }
    }
}

Vue App

import myMixin from './clienteMixin.js'

var app = new Vue({
    delimiters: ['[[', ']]'],
    el: '#app',
    components:{},
    mixins: [myMixin],
    data() {
        return {
            
        }
    },
    methods: {
    
    },
    mounted () {
    
    }
});

Solution

  • First change your export to use the default export:

    export default {
      data() {
        return {
          loading: false,
        }
      },
    }
    

    This will fix the import issue. If you want your mixin to be a global mixin, use Vue.mixin:

    import myMixin from './clienteMixin.js'
    
    Vue.mixin(myMixin);
    
    const app = new Vue({
        delimiters: ['[[', ']]'],
        el: '#app',
        components:{},
        data() {
          return {
          }
        },
        methods: {
        },
        mounted () { 
        }
    });