Vue Js how to use in mixins in single file template?

Question

Hi everyone im new to Vue JS and im trying to use mixins on my filters using single file template and I'm having some hard time

Error I'm getting

Unknown custom element: <side-bar-one> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

component.js

Vue.component('sideBarOne', require('./component/sidebars/sideBarOne.vue'));

sideBarOne.vue

import { default as config } from '../../../config';
import { filters as filter } from '../../../mixins/filters';

export default {
        mixins: [
            filter,
        ],
        mounted: function() {
        }
 }

filters.js

import { default as config } from '../config';
module.exports = {
    filters: {
        useLGLogo( str ) {
            if( str ) {
                return config.LG_LOGO + str.replace(/\s+/g, '-').toUpperCase() + '.png';
            }
        },
        useMDLogo( str ) {
            if( str ) {
                return config.MD_LOGO + str.replace(/\s+/g, '-').toUpperCase() + '.png';
            }
        },
        useSMLogo( str ) {
            if( str ) {
                return config.SM_LOGO + str.replace(/\s+/g, '-').toUpperCase() + '.png';
            }
        },
    }
};

PenAndPapers · Accepted Answer · 2017-05-08 08:02:50Z

9

I've made some changes on my files and made it working

filters.js

    import { default as config } from '../config';
    var filters = {
        filters: {
            useLGLogo( str ) {
                if( str ) {
                    return config.LG_LOGO + str.replace(/\s+/g, '-').toUpperCase() + '.png';
                }
            },
            useMDLogo( str ) {
                if( str ) {
                    return config.MD_LOGO + str.replace(/\s+/g, '-').toUpperCase() + '.png';
                }
            },
            useSMLogo( str ) {
                if( str ) {
                    return config.SM_LOGO + str.replace(/\s+/g, '-').toUpperCase() + '.png';
                }
            },
        }
    };

export default filters;

sideBarOne.vue

import { default as filters } from '../../../mixins/filters';
    export default {
        mixins: [
            filters,
        ],
        mounted: function() {
        }
    }

answered May 8, 2017 at 8:02

PenAndPapers

2,1089 gold badges34 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Eric Guan Over a year ago

You can import default exports with a single name. import filters from, instead of import { default as filters }

Collectives™ on Stack Overflow

Vue Js how to use in mixins in single file template?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related