GitHub - robert-watkin/laravel-vue-saas-boilerplate: Get started with creating your SaaS faster with this Laravel and Vue SaaS boilerplate

7 min read Original article ↗

Hi, I have created this boilerplate for Laravel and Vue to increase the speed in which I can develop SaaS products as a solo developer. I thought this could be useful to others who use the Laravel and Vue stack (Inertia) and want to create SaaS products without having to implement the same features everytime. This boilerplate aims to cover the basic feature set and UI required to start developing a SaaS product meaning you can focus on the important parts of your SaaS idea. Any and all feedback is appreciated :)

This boilerplate is based on the Jetstream starter kit so you get all the benefits provided such as a profile screen, session management, 2FA, etc.

Refreshed 2026: Updated to Laravel 13, Tailwind CSS 4 + DaisyUI 5, modern Vite setup, PHP 8.3+, and other dependencies.

image

Technologies Used

  • Laravel 13
  • Vue 3 + Inertia 2
  • Tailwind CSS 4 + DaisyUI 5 (Themes)
  • Stripe (Laravel Cashier)
  • Mailgun
  • Ziggy

Anything within this boilerplate including technologies chosen are of course intended to be modified to fit your SaaS idea while acting as a starting point to hopefully save some early development time.

Getting Started

I work with Laravel locally with WSL 2 (Windows Subsystem for Linux) running Ubuntu therefore the following instructions will be based on that development setup. You should still be able to use the boilerplate with a different development setup but certain instructions will not apply. I use Laravel Sail to run my local development server. See a link to Laravel Sail documentation below: Laravel Sail Docs

  1. Clone the github repository Navigate to the Github repository and click on the "code" dropdown to see clone options. To clone with SSH, within WSL run the following on the command
git clone git@github.com:RobertWatkin/laravel-vue-saas-boilerplate.git
  1. Copy .env.example to .env and fill in appropriate fields For now ensure you fill in at least a database username and password
  1. As per sail documentation "Installing Composer Dependencies for Existing Applications" This will allow you to run the sail command
docker run --rm \
    -u "$(id -u):$(id -g)" \
    -v "$(pwd):/var/www/html" \
    -w /var/www/html \
    laravelsail/php84-composer:latest \
    composer install --ignore-platform-reqs
  1. Start the container in detached mode
  1. Install composer dependencies inside the container and generate app key
sail composer update && sail composer install && sail npm install && sail artisan key:generate

Note: After major version bumps (Laravel 13 / Tailwind 4), you may need to run sail build --no-cache the first time.

  1. Database Migation
  1. Setup Stripe (Refer to Laravel Cashier section further down)
  2. Setup Email verification (Refer to Setup Email section further down)
  3. Start up the app if you have already started your docker container and you have made any changes to the .env file then it is worth stopping it at this point

then start it up again and watch for changes with npm

sail up -d && sail npm run dev
  1. Visit localhost. Your site should now be running on localhost

Landing Page Components

Welcome.vue is the landing page for the application. The landing page is made up of some Vue components. Feel free to modify or remove components as you see fit

image

Realtime Colors

saas-boilerplate

To create your own color scheme I recommend the use of www.realtimecolors.com/ Create a colour scheme you like and then export the colour scheme with the custom export code below (Tailwind 4 + DaisyUI 5 style):

@plugin "daisyui/theme" {
  name: "realtimeColorsTheme";
  default: true;
  --color-primary: "${primary.hex}";
  --color-primary-content: "${primaryFg.hex}";
  --color-secondary: "${secondary.hex}";
  --color-secondary-content: "${secondaryFg.hex}";
  --color-accent: "${accent.hex}";
  --color-accent-content: "${accentFg.hex}";
  --color-neutral: "${bg.hex.15}";
  --color-base-100: "${bg.hex}";
}

Paste the theme block into resources/css/app.css.

DaisyUI Themes

See the full documentation for Daisy UI below: https://daisyui.com/docs/v5/

DaisyUI 5 + Tailwind 4 is configured primarily via CSS in this boilerplate. Predefined DaisyUI themes can be activated by updating the @plugin "daisyui" configuration block in resources/css/app.css.

image

Animations

The application also uses animations from @vueuse/motion. These can be seen on the landing page when sections of the page are scrolled to be in view. https://motion.vueuse.org/

See an example usage below taken from Feature.vue: image

Setup Email (Mailgun)

  1. Sign into mailgun or create an account if required https://www.mailgun.com/pricing/
  2. Update the .env variables for mailgun The fields you need to update are below and can be found on your mailgun account:
MAILGUN_DOMAIN=
MAILGUN_SECRET=
MAIL_USERNAME=
MAIL_PASSWORD=
MAIL_FROM_ADDRESS="saas-boilerplate@example.com"

image

Once your variables are set you should receive a verification email when registering a new account in the application. You can also use Mailgun to send mail throughout your application. Refer to the Laravel documentation on mail for more information: https://laravel.com/docs/13.x/mail

Stripe Setup (Laravel Cashier)

Laravel Cashier is the official method for implementing Stripe into a Laravel application. See the full documentation for Laravel Cashier below: https://laravel.com/docs/billing

Laravel Cashier allows the implementation of a pricing page and subscription checkout flow as expected from a SaaS product. The pricing options can be toggled between Monthly or Yearly billing. Once again this is all customisable so, if for example you only have monthly billing for your application, feel free to remove or add anything as you see fit. image

  1. Sign into or create Stripe account https://dashboard.stripe.com/register

  2. Setup .env variables The three .env variables you need to set are listed below, you can find these variables in your Stripe account:

STRIPE_KEY=
STRIPE_SECRET=
STRIPE_WEBHOOK_SECRET=

image

  1. Creating stripe products The boilerplate is set to handle 3 products with Monthly and Yearly pricing options. The front end can handle if you choose to only supply Monthly or Yearly options on their own providing you remove the pricing tier you do not require from the config. To create the pricing tiers on stripe navigate to your product catalogue and click 'Add product'. Give the product a name and add the Monthly and/or Yearly pricing.

Below you can see how I have this setup on Stripe after creating the products for both Monthly and Yearly options. The products are named 'price_starter', 'price_basic' and 'price_plus'. Feel free to use this naming convension image

Below you can see what 'price_starter' looks like with my two payment periods listed: image

You get the price id's for each price tier by clicking on the Monthly/Yearly row that you see in the image above which you will require in your inertia config

  1. Add pricing to inertia config In the application code, open the file 'app/Http/Middleware/HandleInertiaRequests.php'. You will see most of this file contains config for the pricing details. Here you can set the names of your pricing tiers, match the prices up to the ones created on Stripe and list the features present within each price tier. This data is used mainly to populate the pricing page and also as a reference for the subscription details in the users profile page when they have an active subscription.

You MUST ensure the stripe_id is set correctly for each of your pricing tiers or Stripe you won't be directed to the Stripe checkout as expected. When you think you have your config setup correctly, move onto the next step where you can test your Stripe setup is successful.

Sending Email Receipts on Successful Subscriptions

Please refer to the official Stripe documentation below: https://docs.stripe.com/payments/advanced/receipts#automatically-send-receipts

Stripe Testing in Local Environment

  1. Activate customer portal for test mode https://docs.stripe.com/no-code/customer-portal?locale=en-GB

  2. Listen to webhooks for localhost testing checkout process Install stripe CLI tool in your environment https://docs.stripe.com/stripe-cli

Sign into the stripe CLI

Listen to webhooks

stripe listen --forward-to http://localhost/stripe/webhook

You must copy the stripe webhook signing secret that is displayed on your screen to your .env for testing. Everything is working when you are receiving 200 responses during the checkout process and the database is correctly adding subscription data for customers.