DOCSEARCHbyAlgolia
Submit Docs

Larasonic Vue SaaS Starter Kit

repository·main·Indexed 20 days ago

https://github.com/shipfastlabs/larasonic-vue

An open-source SaaS starter kit combining Laravel, Vue.js, TailwindCSS, and Inertia. It features a FilamentPHP Admin panel, production-ready Docker infrastructure, advanced authentication, payment integration, and a comprehensive suite of UI components including Accordions, Alert Dialogs, Badges, and Buttons.

Tokens
25.4K
Snippets
84
Records
100
Agent score
70%

What's inside Larasonic

  1. Overview of Larasonic features

    main

    Larasonic is a modern, open-source SaaS starter kit designed for high developer velocity. Key features include:

    • Tech Stack: Laravel, Vue.js, TailwindCSS, and Inertia.
    • Infrastructure: Production Docker ready.
    • Core Functionality: Advanced Authentication, Payment integration, and API readiness.
    • Admin & UI: FilamentPHP Admin panel and a customizable UI.
    • Extensibility: AI integration ready.

  2. Quick Start Larasonic via Laravel Installer

    main

    To create a new project using the Larasonic SaaS starter kit, use the Laravel installer with the --using flag pointing to the shipfastlabs/larasonic-vue repository. This will scaffold a project featuring Laravel, Vue.js, TailwindCSS, and Inertia.

    For more comprehensive installation steps and detailed documentation, refer to the official documentation at docs.larasonic.com.

    laravel new larasonic --using=shipfastlabs/larasonic-vue

  3. Use Command components for command menus

    main

    The Command package provides a set of components for building command menus, search interfaces, and dialogs. These components work together using a shared context to manage filtering and item visibility.

    Available components:

    • Command: The root container.
    • CommandDialog: A command menu presented in a dialog.
    • CommandList: A container for the list of items.
    • CommandInput: The search input field.
    • CommandGroup: A logical grouping of items.
    • CommandItem: An individual selectable item.
    • CommandEmpty: Shown when no items match the search.
    • CommandSeparator: A visual divider.
    • CommandShortcut: Displays keyboard shortcuts next to items.
    <script setup>
import { 
  Command, 
  CommandInput, 
  CommandList, 
  CommandEmpty, 
  CommandGroup, 
  CommandItem 
} from '@/Components/ui/command';
</script>

<template>
  <Command>
    <CommandInput placeholder="Type a command or search..." />
    <CommandList>
      <CommandEmpty>No results found.</CommandEmpty>
      <CommandGroup>
        <CommandItem>Settings</CommandItem>
        <CommandItem>Profile</CommandItem>
      </CommandGroup>
    </CommandList>
  </Command>
</template>

  4. Use the Sidebar component ecosystem

    main

    The Sidebar is composed of several specialized sub-components that work together to build complex navigation structures.

    Layout Components:

    • SidebarProvider: The required context provider for managing sidebar state.
    • Sidebar: The main container.
    • SidebarHeader, SidebarFooter, SidebarContent, SidebarSeparator, SidebarInset.
    • SidebarRail: A visual element for interaction/resizing.
    • SidebarTrigger: A component to toggle the sidebar state.

    Menu & Navigation Components:

    • SidebarMenu, SidebarMenuItem, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton.
    • SidebarGroup, SidebarGroupLabel, SidebarGroupAction, SidebarGroupContent.
    • SidebarMenuSub, SidebarMenuSubItem, SidebarMenuSubButton (for nested navigation).
    • SidebarMenuSkeleton: For loading states.

    Input & Utility:

    • SidebarInput: For search or filtering within the sidebar.
    • useSidebar: A composable to access and manipulate sidebar state programmatically.

  5. Pagination component hierarchy

    main

    To build a pagination bar, use the following component structure:

    • Pagination: The root wrapper component.
    • PaginationContent: A container for the pagination items (usually renders as a ul or nav).
    • PaginationItem: A wrapper for individual links or buttons.
    • PaginationFirst / PaginationLast: Navigation to the start or end of the list.
    • PaginationPrevious / PaginationNext: Navigation to the adjacent pages.
    • PaginationEllipsis: A placeholder indicating skipped pages.
    • Pagination (via PaginationItem): Individual page links.

  6. Configure core application settings via environment variables

    main

    The application's core behavior is controlled through the config/app.php file, which pulls values from environment variables (defined in your .env file). You can configure the application name, environment, debug mode, URL, timezone, and localization settings using the following environment variables:

    • APP_NAME: The name of your application used in notifications and UI elements.
    • APP_ENV: The current environment (e.g., production, local).
    • APP_DEBUG: Boolean flag to enable/disable detailed error messages and stack traces.
    • APP_URL: The root URL of the application, used for generating URLs in Artisan commands.
    • APP_TIMEZONE: The default timezone for PHP date/time functions (defaults to UTC).
    • APP_LOCALE: The default locale for translations.
    • APP_FALLBACK_LOCALE: The fallback locale if a translation is missing.
    • APP_FAKER_LOCALE: The locale used by the Faker library for generating dummy data.
    APP_NAME=Larasonic
APP_ENV=local
APP_DEBUG=true
APP_URL=http://localhost
APP_TIMEZONE=UTC
APP_LOCALE=en
APP_FALLBACK_LOCALE=en
APP_FAKER_LOCALE=en_US

  7. Configure application encryption and keys

    main

    Larasonic uses an encryption key to secure sensitive data. This key is utilized by the encryption services and should be a random, 32-character string.

    • APP_KEY: The primary encryption key.
    • APP_PREVIOUS_KEYS: A comma-separated list of previous keys used to allow decryption of data encrypted with older keys during a key rotation.
    • cipher: The encryption algorithm used (defaults to AES-256-CBC).
    APP_KEY=base64:your-random-32-character-key
APP_PREVIOUS_KEYS=base64:old-key-1,base64:old-key-2

  8. Configure maintenance mode drivers

    main

    Maintenance mode settings determine how the application manages its 'down' state. You can configure the driver and the storage mechanism via these environment variables:

    • APP_MAINTENANCE_DRIVER: The driver used to manage maintenance mode. Supported values are file or cache. Using cache allows maintenance mode to be controlled across multiple machines.
    • APP_MAINTENANCE_STORE: The storage location for the maintenance status (e.g., database).
    APP_MAINTENANCE_DRIVER=cache
APP_MAINTENANCE_STORE=database

  9. Use the Subscriptions Index page props

    main

    The Subscriptions/Index.vue page is an Inertia.js page component that accepts three primary props to manage subscription and invoice data. These props are typically passed from a Laravel controller via Inertia.

    Props

    • activeSubscriptions (Array): A list of the user's currently active subscription objects. Defaults to an empty array.
    • availableSubscriptions (Array): A list of subscription plans available for the user to purchase or upgrade to. Defaults to an empty array.
    • activeInvoices (Array): A list of recent or active invoices. Defaults to an empty array. Note that this prop is wrapped in an Inertia <Deferred> component to allow for lazy loading.
    // Expected Prop Shapes
interface Props {
  activeSubscriptions: Array<any>;
  availableSubscriptions: Array<any>;
  activeInvoices: Array<any>;
}

  10. Configure the Chat Index page props

    main

    The Chat/Index.vue component expects the following props to be passed from the Inertia controller:

    • systemPrompt (String): The predefined system instructions for the AI.
    • models (Array): A list of available AI models for the ModelSelector component.
    • subscriptionEnabled (Boolean): A flag determining if the user has access to the chat. If false, the interface is locked and a subscription prompt is triggered.

  11. Style SidebarMenuButton with variants

    main

    The sidebarMenuButtonVariants utility (powered by class-variance-authority) allows you to apply consistent styling to SidebarMenuButton components using variant and size props.

    Variants:

    • variant:
      • default: Standard hover effects.
      • outline: Adds a border and shadow.
    • size:
      • default: h-8 text-sm
      • sm: h-7 text-xs
      • lg: h-12 text-sm (optimized for icon-only collapse mode).
    import { sidebarMenuButtonVariants } from '@/Components/ui/sidebar';
// Use these variants when applying classes to SidebarMenuButton

  12. Use the Breadcrumb UI components

    main

    The Breadcrumb component set provides a collection of sub-components to build navigation trails. To use them, import the individual components from the resources/js/Components/ui/breadcrumb entry point.

    Commonly used components include:

    • Breadcrumb: The root container.
    • BreadcrumbList: The wrapper for the list of items.
    • BreadcrumbItem: A wrapper for an individual step in the trail.
    • BreadcrumbLink: A clickable link for navigation.
    • BreadcrumbPage: The current page indicator (usually non-clickable).
    • BreadcrumbSeparator: The visual divider between items.
    • BreadcrumbEllipsis: Used to represent collapsed sections of the trail.
    <script setup>
import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
  BreadcrumbEllipsis
} from '@/Components/ui/breadcrumb';
</script>

<template>
  <Breadcrumb>
    <BreadcrumbList>
      <BreadcrumbItem>
        <BreadcrumbLink href="/">Home</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem>
        <BreadcrumbLink href="/docs">Documentation</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem>
        <BreadcrumbPage>Current Page</BreadcrumbPage>
      </BreadcrumbItem>
    </BreadcrumbList>
  </Breadcrumb>
</template>