Laravel 12 Setup with Vue Starter Kit

 Laravel 12 Setup with Vue Starter Kit

Laravel 12 introduces a new Vue.js starter kit, providing a modern and efficient foundation for building applications with a Vue frontend.

Laravel

This starter kit leverages Inertia.js 2, Vue 3 with the Composition API, Tailwind CSS, and shadcn-vue components to streamline development.

Setting Up a New Laravel 12 Project with the Vue.js Starter Kit:

1. Install Composer: Ensure Composer is installed on your system. If not, download it from the official Composer website.

2. Install the Laravel Installer: Open your terminal and run:

   composer global require laravel/installer
   

   Ensure Composer's global vendor bin directory is in your system's PATH to access the laravel command globally.

3. Create a New Laravel Project: Use the Laravel installer to create a new project:

   laravel new my-vue-app
   

   Replace my-vue-app with your desired project name.

4. Navigate to the Project Directory:

   cd my-vue-app
   

5. Install the Vue Starter Kit: Run the following Artisan command to install the Vue starter kit:

   php artisan starter-kit:install vue
   

   This command sets up the Vue frontend within your Laravel application.

6. Install JavaScript Dependencies: Use npm to install the necessary packages:

   npm install
   

7. Build the Frontend Assets: Compile the frontend assets using Vite:

   npm run dev
   

   For production builds, use:

   npm run build
   

8. Start the Development Server: Launch Laravel's development server:

   php artisan serve
   

   Your application should now be accessible at http://127.0.0.1:8000.

Project Structure Overview:

After setting up a new Laravel project with the Vue Starter Kit, your project's directory structure will include both the standard Laravel directories and additional folders specific to the Vue.js frontend. Here's a breakdown of the key directories and their purposes:

my-vue-app/
├── app/                # Backend application logic
├── bootstrap/          # Framework bootstrap files
├── config/             # Configuration files
├── database/           # Database migrations and seeders
├── public/             # Publicly accessible files
├── resources/
│   ├── js/             # Vue.js frontend code
│   │   ├── components/ # Reusable Vue components
│   │   ├── composables/# Vue composables (hooks)
│   │   ├── layouts/    # Layout components
│   │   ├── lib/        # Utility functions and configurations
│   │   ├── pages/      # Page-level components
│   │   └── types/      # TypeScript type definitions
│   └── views/          # Blade templates (if any)
├── routes/             # Application routes
├── storage/            # Storage for logs and uploads
├── tests/              # Automated tests
├── vendor/             # Composer dependencies
├── package.json        # Node.js dependencies and scripts
├── vite.config.js      # Vite configuration file
└── webpack.mix.js      # Laravel Mix configuration file (if used)

Detailed Breakdown:

• resources/js/: This directory houses all the Vue.js frontend code. The structure is organized to promote scalability and maintainability:

  • components/: Contains reusable Vue components that can be utilized across various parts of the application.

  • composables/: Holds Vue composables (similar to React hooks) to encapsulate and share logic between components.

  • layouts/: Includes layout components that define the structure of different pages or sections.

  • lib/: Stores utility functions, context providers, and configuration settings that support the frontend.

  • pages/: Contains page-level components corresponding to different routes in the application.

  • types/: Holds TypeScript type definitions to ensure type safety and enhance code quality.

This organized structure ensures a clear separation of concerns, making it easier to manage and scale your application.

Customization and Further Development:

The Laravel 12 Vue starter kit is fully customizable. All backend and frontend code resides within your application, allowing complete control over your project's structure and design. Utilizing Inertia.js enables building modern, single-page Vue applications using classic server-side routing and controllers, combining Vue's frontend capabilities with Laravel's backend strengths.

GitHub

For more detailed information and advanced customization options, refer to the official Laravel documentation on starter kits.

Following these steps, you can efficiently set up a new Laravel 12 project with the Vue.js starter kit, providing a solid foundation for your web application development.