DEV Community: ScriptMint

Integrate Stripe Payment Gateway with Vue 3 and Laravel

ScriptMint — Sat, 07 Jan 2023 13:17:55 +0000

This article is the second part of the payment gateway integration with Vue 3 & Laravel. This time we will discuss integrating Stripe Payment Gateway without using any external package. Stripe Payment Gateway

There are many Vue 3 components available for integrating Stripe Payment Gateway. Though I respect the open-source authors for making such components available for FREE, but I am not a big fan of external packages. I try to keep the number of external packages as low as possible because there are times when package authors don’t update their package (for any reason) or the package has any compatibility issues when you try to update your application.

Simply, if I can create the component myself, I don’t use any external package.

Hi, I am a Full Stack Developer working with Laravel, Vue.js & Tailwind CSS.

Stripe is one of the most popular Payment Gateway which allows you to collect payment worldwide via Credit Card and other payment methods.

Integrating Stripe Payment Gateway with Vue 3 & Laravel is quite simple.

To start with the integration, make sure you have an active and verified account with Stripe. Once you signup, you will need to provide some information related to your business. Stripe may take 2–3 working days to activate your account. In my case, I got a verified account in less than 4 hours.

Once your account is activated, login into the Stripe dashboard. Navigate to Developers -> API Keys and generate key/secret pair for integration.

Before going for any live transactions, you should always test your transactions in test mode. You can generate key/secret pair for the test as well as live mode.

Next, you need to add the Stripe composer package to your Laravel Project which you can do using the below command:

composer required stripe/stripe-php

How I setup my MacBook setup for Development!

Next, We will load the Stripe JS file to process the payment securely and also to ensure that payment details are sent directly to Stripe without hitting other server.

<script src="https://js.stripe.com/v3/"></script>

Next, we will need 3 different APIs to process the payment.

Payment Initiate API
Payment Success API
Payment Failure API

Let’s create these APIs in your route file.

use App\Http\Controller\StripeController;

Route::post('payment/initiate', [StripeController::class, 'initiatePayment']);
Route::post('payment/complete', [StripeController::class, 'completePayment']);
Route::post('payment/failure', [StripeController::class, 'failPayment']);

Let’s create StripeController class with initiatePayment method.

use Stripe\StripeClient;
use Stripe\PaymentIntent;
use Illuminate\Http\Request;
use Illuminate\Support\Str;
use Stripe\Stripe as StripeGateway;

public function initiatePayment(Request $request)
{
    StripeGateway::setApiKey('STRIPE_SECRET_KEY');

    try {
        $paymentIntent = PaymentIntent::create([
            'amount' => $request->amount * 100, // Multiply as & when required
            'currency' => $request->currency,
            'automatic_payment_methods' => [
                'enabled' => true,
            ],
        ]);

        // Save the $paymentIntent->id to identify this payment later
    } catch (Exception $e) {
        // throw error
    }

    return [
        'token' => (string) Str::uuid(),
        'client_secret' => $paymentIntent->client_secret
    ];
}

Stripe processes the amount in cents for maximum currency i.e. you need to multiply the amount by 100. There are some zero decimal currencies like JPY which don’t need any multiplication.

To initiate a payment, we first need to create a Payment Intent with Stripe Payment Gateway. We will pass the amount and the currency of the payment and save this Payment Intent for future use.

This Payment Intent also generates a Client Secret which we will pass as a response.

Now, we will create a Payment.vue component as follows:

<template>
    <form id="payment-form">
        <div id="payment-element">
            <!-- Stripe will create form elements here -->
        </div>
        <button type="submit" @click="handleSubmit">Pay via Stripe</button>
    </form>
</template>

<script setup>
import { ref, onMounted } from "vue"

const token = ref(null)
const stripe = ref(null)
const elements = ref(null)

onMounted(() => {
    axios.post('INITIATE_PAYMENT_API', {
        amount: 150,
        currency: 'USD'
    }).then(response => {
        token.value = response.token // Use to identify the payment
        stripe.value = Stripe(STRIPE_PUBLISHABLE_KEY);
        const options = {
            clientSecret: response.clientSecret,
        }

        elements.value = stripe.value.elements(options);
        const paymentElement = elements.value.create('payment');
        paymentElement.mount('#payment-element');
    }).catch(error => {
        // throw error
    })
})

const handleSubmit = async (e) => {
    e.preventDefault();

    const { error } = await stripe.value.confirmPayment({
        elements: elements.value,
        redirect: "if_required"
    });

    if (error === undefined) {
        axios.post("PAYMENT_SUCCESS_API", {
            token: token.value,
        })
    } else {
        axios.post("PAYMENT_FAILURE_API", {
            token: token.value,
            code: error.code,
            description: error.message,
        })
    }
}
</script>

We are basically creating an empty form without any input. The reason for creating an empty form is that Stripe Payment Gateway dynamically creates form input and Credit Card details are sent securely to the Stripe server only.

The mounted method of the component generates the form dynamically by using the publishable key & client secret sent by the payment initiates API.

Once you click on the “Pay via Stripe” button, the handleFunction confirms the payment with the Stripe server.

If the payment is successful i.e. there is no error with the payment, you can call the Payment Success API with the token you received during Payment Initiate API.

use Stripe\StripeClient;
use Illuminate\Http\Request;

public function completePayment(Request $request)
{
    $stripe = new StripeClient('STRIPE_SECRET_KEY');

    // Use the payment intent ID stored when initiating payment
    $paymentDetail = $stripe->paymentIntents->retrieve('PAYMENT_INTENT_ID');

    if ($paymentDetail->status != 'succeeded') {
        // throw error
    }

    // Complete the payment
}

In case of any error, you can call Payment Failure API with the error details.

use Illuminate\Http\Request;

public function failPayment(Request $request)
{
    // Log the failed payment if you wish
}

Creating your own component to do the job always feels good. You are basically no longer dependent on any other external package.

If you face any issues or have any query, you can write me at hello@scriptmint.com

Integrate Razorpay Payment Gateway with Vue 3 & Laravel

Integrate Razorpay Payment Gateway with Vue 3 and Laravel

ScriptMint — Sun, 11 Dec 2022 03:36:19 +0000

I am starting a blog series for payment gateway integration with Vue 3 & Laravel. Let's start with Razorpay Payment Gateway

Hi, I am a Full Stack Developer working with Laravel, Vue.js & Tailwind CSS.

Razorpay is one of the most popular Payment Gateways in India which offers you to collect payment via Credit/Debit Card, Net Banking, UPI, Wallet etc.

Integrating Razorpay Payment Gateway with Vue 3 & Laravel is quite simple.

If you are familiar with Stripe Integration, then you will find Razorpay Integration almost similar.

To start with the integration, make sure you have an active and verified account with Razorpay. Once you signup, you will need to upload KYC documents. Razorpay takes 2-3 working days to activate your account.

Once your account is activated, login into Razorpay dashboard. Navigate to Setting -> API Keys and generate key/secret pair for integration.

Before going for any live transactions, you should always test your transactions in the test mode. You can generate key/secret pair for test as well as live mode.

Next, you need to add Razorpay composer package to your Laravel Project which you can do using below command:

composer required razorpay/razorpay

Next, We will use Razorpay Checkout.js file to invoke Payment Modal.

<script src="https://checkout.razorpay.com/v1/checkout.js"></script>

Once the script is loaded, you can initialize the Razorpay function with options in the onMounted method.

Let's create a Payment.vue component as following:

<template>
    <button @click="pay">Pay via Razorpay</button>
</template>

<script setup>
import { onMounted } from "vue"

const pay = () => {
    rzp.open();
}

onMounted(() => {
    var options = {
        "key": "YOUR_KEY_ID", // Enter the Key ID generated from the Razorpay Setting -> API Keys
        "amount": "50000", // Amount is in currency. Default currency is INR. Hence, 50000 refers to 50000 paise
        "currency": "INR",
        "name": "ScriptMint",
        "description": "Test Transaction",
        "image": "https://example.com/your_logo",
        "handler": function (response){
            axios.post("PAYMENT_SUCCESS_API", {
                payment_id: response.razorpay_payment_id,
                order_id: response.razorpay_order_id,
            })
            .then(function (response) {
                // Show success message
            })
            .catch(function (error) {
                // Show failed message
            });
        },
        "prefill": {
            "name": "Customer Name",
            "email": "customer.email@example.com",
            "contact": "9999999999"
        },
        "notes": {
            "address": "Customer Address"
        },
        "theme": {
            "color": "#3399cc"
        }
    };
    var rzp = new Razorpay(options);

    rzp.on('payment.failed', function (response){
        axios.post("PAYMENT_FAILURE_API", {
            payment_id: response.razorpay_payment_id,
            order_id: response.razorpay_order_id,
            code: response.error.code,
            description: response.error.description,
        })
        .then(function (response) {
            // Show failed message
        })
        .catch(function (error) {
            // Show error message
        });
    });
})
</script>

Installing Xdebug on Macos with VS Code! Read this article here.

The options contain your Razorpay Key ID, amount you would like to pay, currency and other keys which are self-explanatory etc.

Please note that we are not passing any order_id key in this options object. If you would like to create an order, then you can include it in the object.

The component also contains a button to make the payment. Once the user clicks on the pay button, it opens a modal window with prefilled name, email & contact number.

You can click on the proceed button and choose the payment method.

Then handler function is called on successful payment. You can send the payment information like payment_id, order_id or signature to Laravel API to verify the payment.

Next, you need to verify the payment which you can do via Laravel API as below:

use Razorpay\Api\Api;
use Illuminate\Http\Request;

public function validatePayment(Request $request)
{
    $api = new Api('RAZORPAY_KEY_ID', 'RAZORPAY_KEY_SECRET');

    $paymentDetail = $api->payment->fetch($request->payment_id)->toArray();

    $status = Arr::get($paymentDetail, 'status');

    if ($status != 'authorized') {
        // Throw error
    }

    // Complete the payment
}

Similarly, on payment failure, you can call the failed callback function.

use Illuminate\Http\Request;

public function logFailedPayment(Request $request)
{
    // Log the failed payment if you wish
}

Here, you need to pass the Razorpay Key ID & Secret to create API object which is used to fetch the detail of the payment ID. You can check the status which when authorized can be used to make the payment as paid.

If you are not a technical person then also you can accept payment via Razorpay. It offers multiple ways to collect payments like Payment Links, Payment Pages, Invoicing, Subscription etc.

Installing Xdebug 3 on MacOS and Debug in VS Code

ScriptMint — Mon, 28 Nov 2022 10:58:59 +0000

I always found setting up Xdebug as one of the most difficult job. But today, I did it under 5 minutes.

Hi, I am a Full Stack Developer working with Laravel, Vue.js & Tailwind CSS.

If you don't use right tool for debugging, you may end up spending your whole day by doing nothing.

How do you debug your code in PHP? Do you use var_dump or dd in Laravel? Many of us also use logger to log output & figure out the problem in multiple steps. Spatie built a debugging tool called Ray that one can use to simplify the operation over dd or logger.

I like to debug Laravel application with Xdebug. Xdebug is an extension for PHP, and provides a range of features to improve the PHP development experience.

Today after I reset my MacBook, I had to setup Xdebug and I did the installation under 5 minutes. So I thought to write a blog explaining how easy it is to setup Xdebug.

Earlier, whenever I used to install Xdebug, I had to look for multiple articles to make it work. Let me clarify, you don't need any Chrome Extension and also you don't need too much configurations. Its super simple.

I use Homebrew to install various packages on my MacBook. I have already installed PHP 8.1 using homebrew by running below command:



brew install php@8.1

Next, you need to install Xdebug PHP Extension which you can install using below command.



pecl install xdebug

My MacBook Setup for Development! Read this article here.

Next, you must enable this extension in your php.ini file. To enable it, locate the php.ini file location. In my case it is located under /usr/local/etc/php directory.

You can either edit your php.ini file and add some config option for Xdebug or create a separate config file for this extension. I choose to go with second option and created a file called ext-xdebug.ini under /usr/local/etc/php/conf.d directory. You just need to put below config in this ext-xdebug.ini file.



zend_extension="xdebug.so"
xdebug.mode=debug
xdebug.start_with_request=yes

If you wish edit your php.ini file, you can put these lines at the bottom.

Restart the PHP service using brew command:



brew servcies restart php

Next, you can run php --version command to check if shows Xdebug extension.

Alternatively, You can call phpinfo function in any PHP file and it should show Xdebug related information.

Next, Open VS Code & Install PHP Debug Extension.

Now, open your project in VS Code, create launch.json config file under .vscode directory with following content:



{
    "configurations": [
        {
            "name": "Listen for Xdebug",
            "type": "php",
            "request": "launch",
            "port": 9003,
        }
    ]
}

This is project specific setting which you need to do in every project wherever you wish to debug your application using Xdebug.

By default Xdebug is listening to port 9003 as you can see in the VS Code PHP Debug extension.

That's all you need to do. Its super simple.

Now its time to debug your application. Open any PHP file, put a breakpoint, press F5 to start debugging and navigate to your browser. You will be redirected back to the VS Code at the same line where you put a breakpoint.

Here, I opened Laravel's web.php file and put a breakpoint. Here is the screenshot of debugging:

You can use the control buttons to perform various moves.

I love code debugging using Xdebug. It can save your precious time & also improves the productivity.

I am in love with my VS Code Setup!

ScriptMint — Fri, 11 Feb 2022 17:03:40 +0000

If you are a developer and don't fall in love with your dev environment, then most probably you are missing something & you will not be as productive as you can.

Attention: I am a Full Stack Developer mostly working with Laravel, Vue.js & Tailwind CSS. I have setup VS Code as per my requirement.

I remember, In mid 2008 during college days, I used to write codes in Notepad. It was hard to write code without any suggestions and formatting any piece of code was not an easy job (Most of my time was spent on matching bracket pairs). At that time I thought, Notepad is the best editor to do this job.

Then I found Notepad++ with Multi Tab support and Bracket Pair identifier.

One day my friend told me about Sublime Text Editor and then I realised what the **** I was doing till date. The most favourite part of Sublime Editor was Multi Cursor support and its theme. First time I saw the Dark Theme and then never get back to the told Light Theme in my career. I also learn about quickly searching files, extensions and key bindings. Everything is awesome! (I still use to work with Sublime Text Editor whenever I need two separate editors)

I was quite happy with Sublime and it was really helping me to do my job quickly and then one day (Early 2018) I checked Jeffrey Way explaining a course "Visual Studio Code for PHP Developers" on Laracasts. Do subscribe if you haven't!

VS Code for PHP Developers on LaracastsI checked the whole series that night and then moved to VS Code immediately (like always I did). Today I feel that VS Code has completed my dev environment and I can do my job quickly & efficiently. In other words, my productivity has increased multi-fold.

This time I convinced my friend to use VS Code who suggested me to use Sublime and Today, we both are using VS Code with almost similar setting.

VS Code has almost everything in it a developer may need. With the integration of Terminal & Git, it usually completes the developer requirement.

In May 2020, I found a guy on Twitter talking about his VS Code setup and I quickly subscribed to his email. He sent 7 newsletter and it blown up my mind. He is none other than Caleb Porzio. Caleb has written a complete course with book, videos to make your VS Code experience awesome.

All the credits for my VS Code setup goes to either Jeffrey Way or Caleb Porzio.

The first thing Caleb said in his newsletter was "Less is more". I understand it as:

Remove everything that can distract your mind.

And I did the same. Believe me, it is one of the thing you will do to setup your Code Editor. Here is the preview of VS Code setup!

I am serious and not joking! I have removed everything that can distract my mind. And now I have much bigger space to write code.

The second best thing I did is placed the sidebar to the right side (In case I need it). You usually write from left to right, so it feels like typical notebook writing where you don't have any margin or space in the left.

Here are details of my VS Code setup:

Theme:

Slime Theme
Operator Mono Font Size 20

Key Bindings:

I was much used to Sublime Text key binding, so many of key bindings are imported from Sublime. Here are my top 10 Key Bindings that I use daily countless time:

Cmd + K, Cmd + B: Toggle Sidebar Visibility
Cmd + Shift + A: Align Code
Ctrl + Shift+ Space: Collapse Explored Folder
Cmd + Alt + P: Open Project Manager
Cmd + Shift + D: Duplicate line
Cmd + J: Toggle Terminal
Ctrl + Shift + E: Open File Explorer
Shift + ` : Show Setting (Preferences)
Cmd + C, Cmd + S: Codespace
Cmd + 2: Split Editor
Ctrl + Space: Show Suggestions (Bonus)

There are many others key bindings which I use regularly. What I have experienced is that you don't need to remember these key bindings. The more you work with your Dev Environment, more quickly it becomes your habit and suddenly you will notice that your fingers will do the job automatically while you do not care about it.

Extensions:

Here are my top 10 extensions that I found most useful.

Snippets:

Snippets are another great feature of VS Code. Snippets are piece of code you use frequently that you can write or generate using shortcuts. You can generate snippet for any programming language you are working with. VS Code saves these snippets in particular language json file which you can directly edit. You can also create global snippet file that can be used in any language.

Here is an example of Vue Snippet. When I use to type "vuecomp", it suggest to use this snippet and immediately import following code for me:

Git:

The shortcut key to get Git Panel in my VS Code is Cmd + Shift+ G. VS Code Git integration offers variety of operations which you usually do with Terminal. You can add file, commit with message, push easily with this panel. You don't need to leave your VS Code for such actions.

Moreover, you can see all available branches, switch to any branch and also view stash from your VS Code.

One of my favourite Git Action is Undo Commit. If you have committed anything by mistake, you can easily undo it with single click.

Terminal:

VS Code offers inbuilt Terminal. In my setup, I can type Cmd + J and toggle its visibility. It also supports multiple tabs and can perform all the actions which you usually perform in your terminal.

Debugging:

I am not regular user of PHP Xdebug but tried it with VS Code and it works well with it. Setting up PHP Xdebug can be a separate article, I will definitely plan it in future.

With these setup, whenever I open my VS Code, I immediately fall in love with it. I keep improving my VS Code working experience by searching for new features, extensions.

I hope you like this VS Code setup. Do share yours, let's learn by sharing!

Vue3 Tailwind Form Components Part IV - Reusable BaseRadio Component

ScriptMint — Thu, 10 Feb 2022 03:20:45 +0000

This is fourth article of Vue3 Tailwind Form Components Series

Form Components are very important for any Web Application. Think about a project without proper Form Components with multiple forms in it. What if you need to change design of your radio input or you wish to add extra functionality into radio input? I did the same mistake in 2018 when using Vue2 and still my project is not easy to maintain.

Live Demo: https://scriptmint-solution.github.io/vue3-tailwind-form-components/

GitHub Repository: https://github.com/scriptmint-solution/vue3-tailwind-form-components

Do check our Advanced Featured Admin Panel at Vana Admin built with Laravel, Vue.js 3 & Tailwind CSS 3 with tons of inbuilt features to quickly build your next project.

BaseRadio

Building BaseRadio component is little complex. Let's build together.

We will start with a basic radio input.

<template>
    <div class="flex items-center">
        <input
            type="radio"
            class="focus:ring-0 h-4 w-4"
        />
        <label class="ml-2 block text-sm text-gray-900">
            label goes here!
        </label>
    </div>
</template>

<script>
export default {
    name: 'BaseRadio',
    inheritAttrs: false
}
</script>

<script setup>
</script>

I hope you understand the meaning of inheritAttrs by now. If not, please refer to our previous articles of this series.

Above we created a simple radio button and a label for its description. Each radio button should have an option and similar to checkbox input, it can be checked. So let's modify this component to accept value and add change event on it.

<input
    v-bind="$attrs"
    :checked="modelValue === value"
    @change="updateInput"
    :value="value"
    type="radio"
    class="focus:ring-0 h-4 w-4"
/>
<label class="ml-2 block text-sm text-gray-900">
    {{label}}
</label>

...
...

<script setup>
const emit = defineEmits(['update:modelValue'])

const props = defineProps({
    label: {
        type: String,
        default: ''
    },
    modelValue: {
        type: [String, Number],
        default: ''
    },
    value: {
        type: [String, Number],
        required: true,
    }
})

const updateInput = ($event) => {
    emit('update:modelValue', $event.target.value)
}
</script>

Here, we are passing three props to the component. We also bind the value of the radio input to the value property. To check whether the radio input will be selected or not, we have compared the modelValue with the given value.

At the change event of radio input, we will emit an event to the component with the value.

So, we have done with the BaseRadio component. What next?

Radio Inputs are always used for multiple options. You never use it for single option (Checkbox is available for this purpose)

So how can we generate BaseRadio component for multiple options? We will create another component BaseRadioGroup. Let's see how!

Create BaseRadioGroup.vue file in the components folder.

<template>
    <div class="flex space-x-4">
        <BaseRadio
            v-for="option in options"
            :label="option.label"
            :value="option.value"
            :name="name"
            v-model="modelValue"
            @update:modelValue="updateInput"
        />
    </div>
</template>

<script>
export default {
    name: 'BaseRadioGroup',
    inheritAttrs: false
}
</script>

<script setup>
import BaseRadio from './BaseRadio.vue'
const emit = defineEmits(['update:modelValue'])

const props = defineProps({
    options: {
        type: Array,
        required: true
    },
    name: {
        type: String,
        required: true
    },
    modelValue: {
        type: [String, Number],
        required: true
    }
})

const updateInput = ($event) => {
    emit('update:modelValue', $event)
}
</script>

In this component, we are passing three properties: An array of options, name for the radio input & model value (i.e. v-model)

We are looping through the options and generating BaseRadio component for each option by passing label & value attribute. Also we are binding v-model to the given modelValue (Used to pre-select option).

We are also listening to update:modelValue event and emiting event to its parent component.

So we have completed our BaseRadio & BaseRadioGroup component. Let's see how can we use it.

<BaseRadioGroup
    :options="[
        {label: 'Option 1', value: 'option1'},
        {label: 'Option 2', value: 'option2'},
    ]"
    name="option"
    v-model="sampleRadio"
/>

Hope you get the idea behind this component. Checkout the full source code in the GitHub repository at https://github.com/scriptmint-solution/vue3-tailwind-form-components

Do let your feedback or suggestion to improve this component.

Vue3 Tailwind CSS Form Components Part III - Reusable BaseCheckbox Component

ScriptMint — Wed, 09 Feb 2022 03:33:54 +0000

This is third part of Vue3 Tailwind Form Components Series

Form Components are very important for any Web Application. Think about a project without proper Form Components with multiple forms in it. What if you need to change design of your checkbox input or you wish to add extra functionality into checkbox input? I did the same mistake in 2018 when using Vue2 and still my project is not easy to maintain.

Live Demo: https://scriptmint-solution.github.io/vue3-tailwind-form-components/

GitHub Repository: https://github.com/scriptmint-solution/vue3-tailwind-form-components

Do check our Advanced Featured Admin Panel at Vana Admin built with Laravel, Vue.js 3 & Tailwind CSS 3 with tons of inbuilt features to quickly build your next project.

BaseCheckbox

Lets start with this Component:

Here is the Code, we would like to get a Custom Checkbox Component.

<BaseCheckbox id="name" name="name" label="Sample Checkbox" />

We will start with a very basic checkbox component. Create a BaseCheckbox.vue file inside your components directory.

<template>
    <div>
        <input
              type="checkbox"
              class="h-4 w-4 focus:ring-0 cursor-pointer rounded"
        />
        <label class="ml-2 block text-sm text-gray-900 cursor-pointer">
              label goes here!
        </label>
    </div>
</template>

<script>
export default {
    name: 'BaseCheckbox',
    inheritAttrs: false
}
</script>

<script setup>
</script>

We have only applied some css classes to make it look better. Lets add some props now. Also note that we have set inheriAttrs property to false, as we wish to bind the attributes of BaseCheckbox to the input field (Not with the root element).

<script setup>
const props = defineProps({
    label: {
        type: String,
        default: ''
    },
    modelValue: {
        type: [String, Number],
        default: ''
    }
})
</script>

In Vue3, you can pass v-model attribute in your component and it will be available as modelValue inside your component. Also, we need to bind this modelValue to the value attribute of the input field.

Next, we need to emit the value everytime whenever user check or uncheck it. To do so, we will make:

<input 
    v-bind="$attrs"
    :checked="modelValue"
    @change="updateInput"
    type="checkbox"
    rows="3" class="w-full shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
/>
...
...

const emit = defineEmits(['update:modelValue'])

const updateInput = ($event) => {
    emit('update:modelValue', $event.target.checked)
}

Here, we bind the attributes to the the field which emits the value of the checkbox field and make it available to the BaseCheckbox component v-model attribute via two way binding.

Unlike BaseInput or BaseTextarea component, here we emit an event on change event & emit the checked value of the element.

That's all. You have successfully created your BaseCheckbox component and use it anywhere in the project.

You can add id attribute to your checkbox component and to the label component so that user when click on the label, can check or uncheck the component.

Here is the final code for this BaseCheckbox component:

<template>
    <div>
        <input
            v-bind="$attrs"
            :checked="modelValue"
            @change="updateInput"
            type="checkbox"
            class="h-4 w-4 focus:ring-0 cursor-pointer rounded"
        />
        <label :for="$attrs.id" class="ml-2 block text-sm text-gray-900 cursor-pointer">
            {{label}}
        </label>
    </div>
</template>

<script>
export default {
    name: 'BaseCheckbox',
    inheritAttrs: false
}
</script>

<script setup>
const emit = defineEmits(['update:modelValue'])

const props = defineProps({
    label: {
        type: String,
        default: ''
    },
    modelValue: {
        type: Boolean,
        default: false
    }
})

const updateInput = ($event) => {
    emit('update:modelValue', $event.target.checked)
}
</script>

Check all the source code in the GitHub repo at https://github.com/scriptmint-solution/vue3-tailwind-form-components

Vue3 Tailwind CSS Form Components Part II - Reusable BaseTextarea Component

ScriptMint — Tue, 08 Feb 2022 05:02:30 +0000

This is second part of Vue3 Tailwind Form Components Series

Form Components are very important for any Web Application. Think about a project without proper Form Components with multiple forms in it. What if you need to change design of your text input or you wish to add extra functionality into text input? I did the same mistake in 2018 when using Vue2 and still my project is not easy to maintain.

Live Demo: https://scriptmint-solution.github.io/vue3-tailwind-form-components/

GitHub Repository: https://github.com/scriptmint-solution/vue3-tailwind-form-components

Do check our Advanced Featured Admin Panel at Vana Admin built with Laravel, Vue.js 3 & Tailwind CSS 3 with tons of inbuilt features to quickly build your next project.

BaseTextarea

Lets start with this Component:

BaseTextarea will be very similar to BaseInput. BaseInput accepts single line of text input while BaseTextarea will accept multi line text input.

<BaseTextarea id="name" name="name" label="Sample Textarea" />

Here is the output we are expecting:

Lets start with a very basic textarea component. Create a BaseTextarea.vue file inside your components directory.

<template>
    <div>
        <textarea
            rows="3" class="w-full shadow appearance-none border rounded py-2 px-3 
            text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
        />
    </div>
</template>

<script>
export default {
    name: 'BaseTextarea',
    inheritAttrs: false
}
</script>

<script setup>
</script>

We have only applied some css classes to make it look better and a row attribute. Lets add some props now. Also note that we have set inheriAttrs property to false, as we wish to bind the attributes of BaseTextarea to the input field (Not with the root element).

<script setup>
const props = defineProps({
    label: {
        type: String,
        default: ''
    },
    placeholder: {
        type: String,
        default: ''
    },
    modelValue: {
        type: [String, Number],
        default: ''
    }
})
</script>

Next, we need to emit the value everytime whenever user input a value. To do so, we will make

<textarea
    v-bind="$attrs"
    rows="3" class="w-full shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
    :value="modelValue"
    @input="updateInput"
/>
...
...

const emit = defineEmits(['update:modelValue'])

const updateInput = ($event) => {
    emit('update:modelValue', $event.target.value)
}

Here, we bind the attributes to the the field which emits the value of the textarea field and make it available to the BaseTextarea component v-model attribute via two way binding.

That's it. You have successfully created your BaseTextarea component and use it anywhere in the project.

Let's assume you need to add another functionality to add labels above your input field. You don't need to go every single textarea field but edit it only in the BaseTextarea component field.

Remember we created BaseLabel component in the last article. Lets use it in your BaseTextarea component as below:

<BaseLabel :for="$attrs.id">{{label}}</BaseLabel>

...
...

<script setup>
import BaseLabel from  './BaseLabel.vue'

....
....

Similarly, you can help block or error message component and add it in your BaseTextarea field.

Check all the source code in the GitHub repo at https://github.com/scriptmint-solution/vue3-tailwind-form-components

Vue3 Tailwind CSS Form Components Part I - Reusable BaseInput Component

ScriptMint — Mon, 07 Feb 2022 08:39:16 +0000

This is first part of Vue3 Tailwind Form Components Series

Form Components are very important for any Web Application. Think about a project without proper Form Components with multiple forms in it. What if you need to change design of your text input or you wish to add extra functionality into text input? I did the same mistake in 2018 when using Vue2 and still my project is not easy to maintain.

Live Demo: https://scriptmint-solution.github.io/vue3-tailwind-form-components/

GitHub Repository: https://github.com/scriptmint-solution/vue3-tailwind-form-components

Do check our Advanced Featured Admin Panel at Vana Admin built with Laravel, Vue.js 3 & Tailwind CSS 3 with tons of inbuilt features to quickly build your next project.

In the first article of this series, we are going to create a Form Component:

BaseInput

Lets start with this Component:

Every text input either comes with a Label. It may accompany a Help block or Error message, keeping all these mind, here is what we are trying to achieve.

<BaseInput id="name" name="name" type="text" label="Sample Input with Help" />
<HelpBlock>This is a help block!</HelpBlock>

Here is the output we are expecting:

Lets start with a very basic input component. Create a BaseInput.vue file inside your components directory.

<template>
    <div>
        <input
            class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
        />
    </div>
</template>

<script>
export default {
    name: 'BaseInput',
    inheritAttrs: false
}
</script>

<script setup>
</script>

We have only applied some css classes to make it look better. Lets add some props now. Also note that we have set inheriAttrs property to false, as we wish to bind the attributes of BaseInput to the input field (Not with the root element).

<script setup>
const props = defineProps({
    label: {
        type: String,
        default: ''
    },
    placeholder: {
        type: String,
        default: ''
    },
    modelValue: {
        type: [String, Number],
        default: ''
    }
})
</script>

Next, we need to emit the value everytime whenever user input a value. To do so, we will make

<input
    v-bind="$attrs"
    class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
    :value="modelValue"
    @input="updateInput"
/>
...
...

const emit = defineEmits(['update:modelValue'])

const updateInput = ($event) => {
    emit('update:modelValue', $event.target.value)
}

Here, wee bind the attributes to the input field which emits the value of the input field and make it available to the BaseInput component v-model attribute via two way binding.

That's it. You have successfully created your BaseInput component and use it anywhere in the project.

Let's assume you need to add another functionality to add labels above your input field. You don't need to go every single input field but edit it only in the BaseInput component field.

Create another BaseLabel.vue file inside your components directory and put below code:

<template>
    <label :for="for" class="block text-sm font-medium text-label text-gray-800 dark:text-gray-300 truncate">
        <slot></slot>
    </label>
</template>

<script>
export default {
    name: 'BaseLabel'
}
</script>

<script setup>
const props = defineProps({
    for: {
        type: String,
        default: ''
    }
})
</script>

Here we are accepting for attribute that will use to bind this label with the input field. Next, use it in your BaseInput component as below:

<BaseLabel :for="$attrs.id">{{label}}</BaseLabel>

...
...

<script setup>
import BaseLabel from  './BaseLabel.vue'

....
....

Simple it is. Right? Similarly, you can help block or error message component and add it in your BaseInput field.

Bonus

Add success, error, info & warning class to make your component feature reach.

Check all the source code in the GitHub repo at https://github.com/scriptmint-solution/vue3-tailwind-form-components

Vumin - Free Vue.js, Tailwind CSS Admin Template

ScriptMint — Sun, 06 Feb 2022 07:13:54 +0000

Vumin is a Free Admin Template built with Vue.js & Tailwind CSS.

Highlights

SPA (Single Page Application)
Reusable Components
Vue Router & VueX Support
Compsition API
Script Setup Syntax
Super Fast Vite.js builds within 10 seconds
Production CSS < 20 kb, JS < 200 kb

Live Demo: https://vumin.scriptmint.com

GitHub Repository: https://github.com/scriptmint-solution/vumin-lite

Advance and Full Featured Admin Panel built with Laravel, Vue.js & Tailwind CSS is available.
Live Demo of Advance Version: https://ui.scriptmint.com

Features Available

Mobile Responsive
Dark & Light Mode
Profile Dropdown
Sidebar Navigation
Login Page
Register Page
Password Page
Dashboard with Chart & Stats
Sample Table
Sample Form
Sample Cards
404 Error

Installation

git clone git@github.com:scriptmint-solution/vumin-lite.git vumin
cd vumin
npm install
npm run dev

NPM packages used:

Font Awesome
HeadlessUI
Chart.js
Vue
Vue Router
VueX
TailwindCSS
TailwindCSS Form
Vite.js
Vite.js Compression Plugin
PostCSS

Browser Support

Modern Browser Only

Issue Reporting

If you face any issue, please raise issue at https://github.com/scriptmint-solution/vumin-lite/issues

License

MIT License
Copyright (c) 2022 scriptmint.com (https://scriptmint.com)

My MacBook Setup for Development!

ScriptMint — Sat, 05 Feb 2022 04:34:28 +0000

How I setup MacBook, What Apps do I use to improve productivity?

I usually share articles about coding but today I decided to share an article about my MacBook & Dev Environment setup.

I am using 16 Inch MacBook Pro 2019 Model and quite satisfied with its performance since last 2 years.

I don't restart my MacBook regularly until it gets started slowing down. At this time of writing, I found that last restart was around a month ago (Yes! It's been 31 days) and not a single sign of slow down. Truly worth buying!

MacBook is my second ❤️. Obviously Family is the first. But I use to treat MacBook same as my Family Member. All the files & folders are arranged in very systematically that I don't need to use the search bar any more.

My Desktop & Download Folder is always empty! Everytime, I download a file and either I delete it after use or move it to folders of its type.

I know it is not an easy task, I have seen garbage on many other's computer. I even keep emptying my trash items. Is it too much?

Okay! Coming back to the point.

I have replaced spotlight with RayCast and believe me it is amazing. It offers tons of extra features like snippets, extensions etc that I am using frequently since last 2 months.

I am a Full Stack Developer working with Laravel, VueJS, Tailwind CSS. I use to have all my windows in a fixed order. This helps me to improve my productivity multi-fold. Let me show you how!

Usually I have 7 windows with Desktop arranged in centre. Here is the order from left to right:

Most of my time is spent around iTerm2 & VS Code that is why it is positioned centred.

Spark Email & Todoist

I use to manage multiple emails. Spark is one of the best email client I found for MacOS. I have merged this window with Todoist and you know it doesn't look like two different app. Check the screenshot!

I use Todoist as my Calendar with all my tasks listed in it and I am a Pro-user of Todoist.

Evernote

It is my life saver. I use to put all my notes, memo in it. It takes full window size and pretty useful for user like me. Again, I am using paid version of it, to use premium features & make my time it more productive. Btw, I have over 24 Notebooks on Evernote.

GitHub Desktop & Sequel Ace

GitHub is another life saver for developers. Sequel Ace is my Database Management tool.

Desktop

Desktop is in the centre of stage with iTerm2 & Finder sharing half each.

VS Code

I spent most of my development time with VS Code. Started using it in 2017 after watching Jeffrey Way's tutorial https://laracasts.com/series/visual-studio-code-for-php-developers

My VS Code setup is very much inspired by Caleb Porzio's https://makevscodeawesome.com. I can write a separate article about VS Code setup.

Google Chrome

Don't think, I have to say much about it.

Termius

Termius is an SSH Client which I find the best. Everything offered by Termium is awesome and I use it regularly.

This fixed order helps me to save a lot of my time. My fingers move left to right and vice versa quickly without any confusion.

Here are the other Apps I use on my MacBook for Development Purpose:

iTerm2 with zsh & using Oh My Zsh! for a delightful terminal experience - Will write a separate article about it.
Tinkerwell by BeyondCode - Must have PHP Dev tool for every Laravel Developer
Invoker by BeyondCode - Another amazing tool for Laravel Developers
Hello by BeyondCode - Local Email testing tool
Ray by Spatie - Debugger tool
Postman - API client
Sublime Text - Not as much as VS Code but it is also a life saver.

I fall in ❤️ with my MacBook every day I start my work with this beautiful setup & I have improved my productivity a lot.

You can see that I am a Big fan of Dark Mode. Almost every thing on my MacBook & iPhone will have Dark Mode.

In my free time, my favorite google search is "Productivity Tools for MacOS".

Do share how you setup & use your computer. Lets learn from sharing and make coding awesome!

Multicolor theme & Dark Mode setup with Tailwind CSS

ScriptMint — Fri, 04 Feb 2022 10:44:19 +0000

Tailwind CSS offers out of the box support for theming your project. With Tailwind CSS, you can offer multicolor theme feature in your project with few lines of code.

Live Demo: https://scriptmint.github.io/tailwind-theme/

Github Repo: https://github.com/scriptmint/tailwind-theme

So lets setup a Multicolor Theme project with Tailwind CSS. Open your terminal & start working.

mkdir tailwind-theme
cd tailwind-theme
npm install -D tailwindcss
npx tailwindcss init

This will generate a tailwind.config.js file in your directory. Lets make little modification here.

module.exports = {
  content: ["./*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Here we are defining the directory & its files where we will write some CSS classes and all other unused classes which are generated in the Tailwind CSS will be purged.

Next, lets create a css file /src/app.css.

@tailwind base;
@tailwind components;

.theme-first {
    --color-primary: #1e293b;
    --color-secondary: #e2e8f0;
}

.theme-second {
    --color-primary: #991b1b;
    --color-secondary: #fecaca;
}

.theme-third {
    --color-primary: #166534;
    --color-secondary: #bbf7d0;
}

@tailwind utilities;

We have setup three themes with primary & secondary color along with default tailwind setup.

We will need to configure our tailwind.config.js file again as below:

const colors = require('tailwindcss/colors')

module.exports = {
  content: ["./*.{html,js}"],
  theme: {
    textColor: {
      "primary" : "var(--color-primary)",
      "secondary" : "var(--color-secondary)",
        ...colors
    },
    backgroundColor: {
      "primary" : "var(--color-primary)",
      "secondary" : "var(--color-secondary)",
        ...colors
    },
    extend: {},
  },
  plugins: [],
}

This will generate "text-primary", "text-secondary", "bg-primary" & "bg-secondary" class with given theme color.

As mentioned earlier, Tailwind CSS offers out of the box support for themes. We are defining text & background colors which will be picked up based on the current theme.

So, its time to create your html file to so the Tailwind magic:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="https://scriptmint.com/images/favicons/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind Theme CSS</title>
    <link href="/dist/app.css" rel="stylesheet">
  </head>
  <body class="theme-first">
    <div class="h-screen w-full flex items-center justify-center bg-primary">
      <div class="space-y-4">
        <h1 class="text-secondary text-center">Hello World!</h1>
      </div>
    </div>
  </body>
</html>

Here we are adding "theme-first" class on the body element. You can change this class to "theme-second" or "theme-third" to get the desired color theme.

Next, lets build our CSS file using below command:

npx tailwindcss -i ./src/app.css -o ./dist/app.css

This will generate your css file under "dist" directory. Link this css file in our HTML directory and visit on your browser.

Bonus - Dark Theme Setup

You need not to add another theme to offer dark theme in your project. You can add one line in the tailwind.config.js file as below:

module.exports = {
  content: ["./*.{html,js}"],
  darkMode: 'class',
  theme: {
  ...
  ...

Here we are defining darkMode property to "class". Now, you can put "dark" class in the body element to get the desired result. Also, you can now define the dark theme color using "dark:" modifier like we added "dark:bg-gray-800" class.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="https://scriptmint.com/images/favicons/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind Theme CSS</title>
    <link href="/dist/app.css" rel="stylesheet">
  </head>
  <body class="theme-first">
    <div class="h-screen w-full flex items-center justify-center bg-primary dark:bg-gray-800">
      <div class="space-y-4">
        <h1 class="text-secondary dark:text-gray-200 text-center">Hello World!</h1>
      </div>
    </div>
  </body>
</html>

Tailwind offers various configurations which you can even use to change fonts, borders, radius etc with this theme configuration. You can read more about Tailwind CSS theme at https://tailwindcss.com/docs/theme

Set up Tailwind, AlpineJS, Laravel & Livewire - TALL Stack for Development

ScriptMint — Wed, 02 Feb 2022 19:56:45 +0000

Note: You should have basic knowledge of Laravel, NPM commands before you setup this TALL Stack.

TALL is another popular dev stack in Laravel Community. I personally choose TALL Stack when I need to build small size Web Application without any REST API Feature.

Github Repo: https://github.com/scriptmint-solution/tall-stack-setup

Here are the steps I prefer to setup TALL Stack.

Setup Laravel 8

You must have Composer v2 installed on your system.

If you wish to install Laravel with Composer, you can run:



composer create-project laravel/laravel vutal
cd vutal

If you have installed Laravel Installer globally as composer dependency, you can run:



laravel new vutal
cd vutal

Install Laravel Livewire

To install Laravel Livewire, run below command:



composer require livewire/livewire

You will also need to link Livewire's asset but we will come back to this step later.

Add Tailwind CSS 3

To install Tailwind CSS 3, you can run:



npm install -D tailwindcss
npx tailwindcss init

This will create tailwind.config.js file which you can use to configure your tailwind setup. The default content of tailwind.config.js is as below:



module.exports = {
  content: [
    './resources/**/*.blade.php',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Note: We are searching for all blade.php files and removing unused classes to reduce the size of your css file.

Next, create an app.scss file under resources/sass folder and put following content:



@tailwind base;
@tailwind components;
@tailwind utilities;

You also need to install additional dependencies by running below command:



npm install resolve-url-loader sass sass-loader --save-dev

Add AlpineJS

There are two ways you can add AlpineJS in your project. First one is using CDN (I rarely use it). I use to go with second one as following:



npm install alpinejs

Next, edit your resources/js/app.js file and import AlpineJS as below:



import Alpine from 'alpinejs'

window.Alpine = Alpine
Alpine.start()

We will see its magic in a few moments.

Now, edit your webpack.mix.js file that will compile your assets.



const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .options({
        postCss: [ tailwindcss('./tailwind.config.js') ],
    });

Also, build your assets using npm command:



npm run dev

The assets are generated under public folder as shown in the image below:

You can link these assets to your welcome.blade.php file as below.



<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Hello World</title>
        <link href="/css/app.css" rel="stylesheet">
        @livewireStyles
    </head>
    <body>

        <div class="h-screen w-full flex justify-center items-center bg-gray-800">
            <!-- Livewire component will be placed here -->
        </div>
        <script src="/js/app.js"></script>
        @livewireScripts
    </body>
</html>

Note that we also added Livewire assets in our blade file and also put some Tailwind styling.

Your TALL Stack setup is now completed. Its time to add your first Livewire component, run below command to create a Livewire component:



php artisan make:livewire counter

This will generate Counter.php file under app/Http/Livewire directory & a counter.blade.php file under resources/views/livewire directory.

Edit counter.blade.php file and put some Livewire magic over there.



<div class="space-x-4">
    <button class="bg-gray-300 px-4 py-2 rounded text-gray-700" wire:click="increment">Increment</button>
    <button class="bg-gray-300 px-4 py-2 rounded text-gray-700" wire:click="decrement">Decrement</button>

    <div class="block py-4 text-gray-300 text-center">{{$count}}</div>
</div>

We are generating two buttons to to change the counter value. The increment & decrement functions are defined in Counter.php file as below:



<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Counter extends Component
{
    public $count = 0;

    public function increment()
    {
        $this->count++;
    }

    public function decrement()
    {
        $this->count--;
    }

    public function render()
    {
        return view('livewire.counter');
    }
}

Your Livewire component is ready, add it in your welcome.blade.php file as below:



<div class="h-screen w-full flex justify-center items-center bg-gray-800">
    @livewire('counter')
</div>

Now, compile the assets once again & navigate to your application in your browser.

See the Livewire magic yourself. You can increment or decrement counter's value without any page refresh.

Lets see the magic of AlpineJS. Add another button toggle in counter.blade.php file to show & hide the counter.



<div class="space-y-4" x-data="{show: true}">
    <button class="bg-blue-300 px-4 py-2 rounded text-blue-700" @click="show = ! show">Toggle</button>

    <div class="space-x-4" x-show="show">
        <button class="bg-gray-300 px-4 py-2 rounded text-gray-700" wire:click="increment">Increment</button>
        <button class="bg-gray-300 px-4 py-2 rounded text-gray-700" wire:click="decrement">Decrement</button>

        <div class="block py-4 text-gray-300 text-center">{{$count}}</div>
    </div>
</div>

Refresh the page & see the magic of AlpineJS. You can toggle the visibility of counter buttons with minimal 3 lines of AlpineJS code.

I hope you like this post. If you have any query, please comment.