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

frontend, javascript, vue-component, vue.js, vuejs2

Solution

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() {
        }
    }

Problem

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'; } }, } }; ```

Original source