0
\$\begingroup\$

In option API (Vue 2 syntax which is still available in version 3) we could extract some repeated pieces inside many components and define them as mixin that could be reusable like :

const colorable = {

    props: {
        bgColor: {
            type: String,
            default: "",
        },     
        color: {
            type: String,
            default: "",
        },
    },
 computed:{
      colorClasses(){
       return `text--${this.color} bg--${this.bgColor}`
    }
  }
}

then we use that mixin in any component like :

mixins:[colorable]

In vue 3 they introduced the new composition api that enforces the code reusability and organization, so if we want to convert the code above to be compatible with this API we could do something like :

const colorable = {

    props: {
      // the same props as above 
    },
}

and composable function :

const useColor=(props)=>{

   return {
     classes: computed(()=>`text--${props.color} bg--${props.bgColor}`)
 }
}

then in some component :

mixins:[colorable],
setup(props){

   const {classes}=useColor(props);

   return {classes}
}
}

This works fine I look for a better solution to get rid of the mixins option.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.