Configuration

Inertia Start is designed to be easily configurable. Configuration is done via environment variables and standard Laravel config files. For a deep dive, check the Laravel Configuration documentation.

Environment Variables

The .env file in the root of your project contains sensitive credentials and environment-specific settings.

Critical variables to configure:

• APP_NAME: The name of your application.
• APP_URL: The URL of your application (used for generating links).
• DB_*: Database connection details.
• MAIL_*: Email service configuration.

On top of the environment variables that come with Laravel, Inertia Start adds its own variables. These variables use the I_S_ prefix.

General feature flags

App layout

The authenticated application shell is configurable through I_S_APP_LAYOUT.

• sidebar: render the default sidebar application shell.
• header: render the header-based application shell.

Example:

I_S_APP_LAYOUT=header

The value is normalized in config/inertia-start.php, then shared with the frontend as page.props.appLayout through HandleInertiaRequests middleware.

Localization

When localization is enabled, these are the relevant configuration files and directories:

• config/inertia-start.php: all localization settings live under the localization key. locales, detection, and storage are global, while localized_urls only applies when you use localized URLs.
• config/env/locales.json: by default, Inertia Start uses this file to populate inertia-start.localization.locales.
• lang/: translation strings, including optional routes.php files when you translate URI segments with Lang::uri(...).

By default, config/inertia-start.php uses en as both the fallback locale and the omitted locale under localization.localized_urls. That means English URLs stay unprefixed while the other locales use a prefix.

If your primary language is not English, update both values:

'localization' => [
    'localized_urls' => [
        'fallback_locale' => 'fr',
        'omitted_locale' => 'fr',
    ],
],

See the Localization guide for the full routing and translation workflow.

Billing system

Use php artisan inertia-start:billing:setup to toggle billing and choose the default provider, then fill in the provider credentials you need.

Shared billing settings

Stripe

Paddle

Activity logs

Activity log expiration is configured in config/inertia-start.php through the activity_log_lifetimes option.

'activity_log_lifetimes' => file_exists(config_path('env/activity_log_lifetimes.json'))
    ? json_decode(file_get_contents(config_path('env/activity_log_lifetimes.json')), true)
    : [
        'throttle' => '2 days',
    ],

This configuration maps log names to retention durations. Only the log names listed here are marked as expirable and will be purged automatically.

If you want to override the defaults without editing the config file directly, create config/env/activity_log_lifetimes.json.

See the Activity Logging guide for the full logging workflow.

Branding

Logo

The application logo components are located at:

• resources/js/components/AppLogo.vue
• resources/js/components/AppLogoIcon.vue

The logo used in emails is located at:

• resources/views/vendor/mail/html/logo.blade.php

You can customize these components to match your brand.

Colors

Inertia Start uses Tailwind CSS v4. Theming and configuration is handled using CSS in resources/css/app.css.

Inertia Start comes with pre-built themes: 27 primary colors and 26 secondary colors (based on the last version of the Tailwind's palette) that you can combine as you want.

To change theme colors, just change the imported primary and secondary colors in resources/css/theme.css. For example, to use amber as primary color and stone as secondary color, replace the default colors like this:

@import './themes/primary/black.css'; 
@import './themes/primary/amber.css'; 
@import './themes/secondary/zinc.css'; 
@import './themes/secondary/stone.css'; 
@import './themes/common.css';

If you change the secondary color, you will also have to change the Tailwind CSS prose class in the resources/js/components/ProseContent.vue component:

<div class="prose prose-sm max-w-none prose-zinc md:prose-base dark:prose-invert" v-html="content"></div>
<div class="prose prose-sm max-w-none prose-stone md:prose-base dark:prose-invert" v-html="content"></div>

Fonts

We use Fontsource to manage fonts.

To change or add fonts:

1. Find and install your fonts (go to Fontsource).

npm install @fontsource-variable/inter @fontsource-variable/space-grotesk

Follow the instructions in the "Install" tab of the font to know how to import it and which value is expected for the font-family property.

2. Import your fonts in resources/js/app.ts

import '@fontsource-variable/inter'; // Supports weights 100-900
import '@fontsource-variable/space-grotesk'; // Supports weights 300-700

3. In resources/css/app.css, use the --font-* Tailwind CSS theme variables to customize the font family utilities in your project (Inertia Start uses --font-sans and --font-heading in its built-in pages, feel free to add other font utilities as needed).

@theme inline {
  --font-sans:
    'Inter Variable', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading:
    'Space Grotesk Variable', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

@layer utilities {
  body,
  html {
    --font-sans:
      'Inter Variable', ui-sans-serif, system-ui, sans-serif,
      'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
      'Noto Color Emoji';
    --font-heading:
      'Space Grotesk Variable', ui-sans-serif, system-ui, sans-serif,
      'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
      'Noto Color Emoji';
  }
}

4. Use the font utilities in your markup

<div class="font-heading">
  <!-- ... -->
</div>

Legal Texts

Your legal texts can be written in markdown, they will be automatically converted to HTML and beautifully formatted with Tailwind CSS Typography plugin in our ProseContent Vue component.

Terms of Service

Add your general terms of service in:

• resources/markdown/legal-terms.md for the default language of your app (the locale in app.locale config)
• resources/markdown/legal-terms.{locale}.md for each additional language that your app supports (example for fr locale: resources/markdown/legal-terms.fr.md)

Privacy Policy

Add your privacy policy in:

• resources/markdown/privacy-policy.md for the default language of your app (the locale in app.locale config)
• resources/markdown/privacy-policy.{locale}.md for each additional language that your app supports (example for fr locale: resources/markdown/privacy-policy.fr.md)