Pass default Props

When you import a component that when used is expecting certain props to be passed to it, is there a way to define them by default when you import the component so you don’t need to pass the same props over and over every time its used?

import LotsOfPropsRequired from 'some-dandy-component'

// define them and push them into the component so you dont need to later on
const options = {
     lots of props,
     color:"#E91E63",
     more props
}

// how to add them into the component here?
Vue.component('LotsOfPropsRequired', LotOfPropsRequired)

Thanks,

Dave

I may be misunderstanding what you are trying to solve, but why are those props not just defined on the “some-dany-component” ?

or are you wanting these same properties, to be defined on many different components and you dont want to copy and paste them amongst all the defined components?

If thats the case, just define a mixin that all these components inherit from.

Exactly, I just wanted to define to common ones I found I had repeating everytime I used the component.

But I solved it like so:

Vue.component('VuePortrait', {
  extends: VuePortrait,
  props: {
    position: {
      type: String,
      default: 'center center'
    },
    color: {
      type: String,
      default: '#E91E63'
    },
    backgroundColor: {
      type: String,
      default: 'rgba(255, 255, 255, .5)'
    }
    ... and so on it goes
  }
})

Why wouldnt you use a mixin for this? This is exactly what I would use a Mixin for if I had common property definitions used across many different components.

Side note this is a Nuxt app so the component is imported as a plugin globally. I just figured set everything at the point in inclusion so its dealt with and done from the start.

Why a mixin? Just curious?

Right now all I need to do is:

<vue-portrait />

vs.

import portraitMixin from '@/mixins/portrait.js'
mixins: [portraitMixin ],

Then in the template

<portrait  />

Or am i missing something? Or thinking about this wrong altogether?

Thanks,

Dave