Extend a mixins script from vendor in Vuejs and Laravel

Question

I have an original script (stripe.js) in my vendor file. Editing it directly in the vendor file is not a solution.

I wish I could change the function (createCardElement) I need.

/*stripe.js*/

module.exports = {
/**
 * The mixin's data.
 */
data() {
    return {
        stripe: Spark.stripeKey ? Stripe(Spark.stripeKey) : null
    }
},


methods: {
    /**
     * Create a Stripe Card Element.
     */
    createCardElement(container){
        if (!this.stripe) {
            throw "Invalid Stripe Key/Secret";
        }

        var card = this.stripe.elements().create('card', {
            hideIcon: false,
            hidePostalCode: true,
            style: {
                base: {
                    '::placeholder': {
                        color: '#aab7c4'
                    },
                    fontFamily: 'Whitney, Lato, -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol"',
                    color: '#495057',
                    fontSize: '15px'
                }
            }
        });

        card.mount(container);

        return card;
    }
},
};

This file is imported into another file (register-stripe.js)

module.exports = {
    /**
     * Load mixins for the component.
     */
    mixins: [
        require('./../mixins/register'),
        require('./../mixins/plans'),
        require('./../mixins/vat'),
        require('./../mixins/stripe')
    ],
    selectedPlan(val){
                if (!val || val.price == 0) {
                    this.cardElement = null;
                    return;
                }

                if (!this.cardElement) {
                    this.$nextTick(()=> {
                        this.cardElement = this.createCardElement('#card-element');
                    });
                }
            }
        },
    }

I have access to a file or I can overwrite the functions in register-stripe.js, but I do not know how to overwrite those in the mixins array.

Register-stripe.js (version that I can edit)

var base = require('auth/register-stripe');

Vue.component('spark-register-stripe', {
    mixins: [base]
});

Thank you for your help !

score 0 · Answer 1 · answered Jul 31 '18 at 19:41

You'll need to publish your Spark assets to do this. There's a command that Laravel includes as part of artisan which allows you to copy over any publishable files from a composer package into your project.

Spark makes use of this for its views, css, js and images. To publish the assets, browse to your project directory (where your artisan file is) and run:

php artisan vendor:publish

Depending on your Laravel and Spark version you'll either get:

A list of available packages to import (in which case you just enter the number next to the package to import and hit enter)
A list of files that have been imported from spark.

You can confirm if it has imported correctly by browsing to your resources/assets/js directory, where you should now have a spark and spark-components directory.

You'll find the stripe.js mixin file in `resources/assets/js/spark/mixins/ directory.

Extend a mixins script from vendor in Vuejs and Laravel

1 Answers1