Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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';
            }
        },
    }
};
like image 766
PenAndPapers Avatar asked May 08 '17 07:05

PenAndPapers


People also ask

How do I use props in Vue template?

To specify the type of prop you want to use in Vue, you will use an object instead of an array. You'll use the name of the property as the key of each property, and the type as the value. If the type of the data passed does not match the prop type, Vue sends an alert (in development mode) in the console with a warning.

How do you use mixin in composition API?

To use the Mixin in any component, you simply have to import the Mixin module and assign it to the mixins configuration property in the component. At runtime, the options specified in the Mixin will be available as options and will be “mixed” into the consuming component's options.


1 Answers

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() {
        }
    }
like image 139
PenAndPapers Avatar answered Sep 19 '22 22:09

PenAndPapers