How to pass props to third-party component?

Question

I'm trying to get bliblidotcom/vue-rangedate-picker to work in English.

Thus, I need to pass a prop called: i18n and give it a value of EN .

This is what I did in Orders.vue:

<rangedate-picker :props="props" @selected="onSelect"></rangedate-picker>

And, this is what I did in VueJS code:

import VueRangedatePicker from 'vue-rangedate-picker';
export default {
    props: {
        'i18n': 'us/en',
    },

    components: {
        'rangedate-picker': VueRangedatePicker
    },

    data() {
        return {
            endpoint: '/approve',
            orders: [],

But I receive this error:

dash.66983ac….js:52014 [Vue warn]: Property or method "props" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties .

found in

---> at C:\Users\bnbih\Projects\business2\api\resources\assets\js\components\orders.vue

Answer 1

You need to pass as i18n , not props

<rangedate-picker :i18n="language" @selected="onSelect"></rangedate-picker>
data() {
  return {
    language: 'en',
    endpoint: '/approve',
    orders: []
  }
}