Connecting Laravel 12 with Vuetify via API: A Comprehensive Guide

It seems likely that connecting a Vuetify front-end with a Laravel 12 back-end via API involves setting up both systems separately and linking them with HTTP requests. Research suggests using Laravel's php artisan install:api command simplifies API setup, while Vuetify—a UI component framework for Vue.js—requires a new project setup with the Vue CLI.

The evidence leans toward using Axios for API calls in Vuetify, ensuring smooth communication between front-end and back-end.

Setting Up the Back-End with Laravel 12

First, we need to create and configure the Laravel 12 back-end, focusing on setting up an API for our blog application.

Installing Laravel 12

Open your terminal and run the following command to create a new Laravel 12 project:

composer create-project --prefer-dist laravel/framework blog "12.*"

This command creates a directory named blog with Laravel 12. Then navigate into the project:

cd blog

Start the Laravel development server to ensure everything is working:

php artisan serve

Visit http://localhost:8000 in your browser to see the Laravel welcome page.

Setting Up the API

Laravel 12 introduces a convenient command to set up API routing. Run:

php artisan install:api

This command installs necessary packages (like Laravel Sanctum for API authentication), sets up routes/api.php with API middleware, and configures the project for stateless API requests.

Creating a Model and Migration

Our blog application needs a Post model to represent blog posts in the database. Run:

php artisan make:model Post -m

This generates a Post model in app/Models and a migration file in database/migrations. Open the migration file (e.g., xxxx_xx_xx_create_posts_table.php) and define the schema:

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration {
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->text('content');
            $table->timestamps();
        });
    }

    public function down()
    {
        Schema::dropIfExists('posts');
    }
};

Run the migration to create the posts table:

php artisan migrate

Ensure your .env file is configured with your database details.

Defining API Routes

Open routes/api.php and define the routes for our CRUD operations. We’ll use a resource controller:

<?php
use App\Http\Controllers\PostController;
use Illuminate\Support\Facades\Route;

Route::apiResource('posts', PostController::class);

Creating the Post Controller

Generate a resource controller to handle API requests:

php artisan make:controller PostController --resource

Open app/Http/Controllers/PostController.php and implement the methods:

<?php

namespace App\Http\Controllers;

use App\Models\Post;
use Illuminate\Http\Request;

class PostController extends Controller
{
    public function index()
    {
        return Post::all();
    }

    public function store(Request $request)
    {
        $validated = $request->validate([
            'title'   => 'required|string|max:255',
            'content' => 'required|string',
        ]);

        $post = Post::create($validated);
        return response()->json($post, 201);
    }

    public function show(Post $post)
    {
        return response()->json($post);
    }

    public function update(Request $request, Post $post)
    {
        $validated = $request->validate([
            'title'   => 'required|string|max:255',
            'content' => 'required|string',
        ]);

        $post->update($validated);
        return response()->json($post);
    }

    public function destroy(Post $post)
    {
        $post->delete();
        return response()->json(null, 204);
    }
}

Setting Up the Front-End with Vuetify

For the front-end, we’ll use Vuetify—a UI component framework for Vue.js that follows Material Design guidelines.

Installing Vue CLI and Creating a Vuetify Project

First, ensure you have the Vue CLI installed globally:

npm install -g @vue/cli

Then, create a new Vue project:

vue create vuetify-front-end

Follow the prompts (you can choose the default preset) and then navigate into the project directory:

cd vuetify-front-end

Adding Vuetify

Add Vuetify to the project:

vue add vuetify

Select the default preset when prompted.

Installing Axios for API Requests

To connect to the Laravel API, install Axios:

npm install axios

Open src/main.js and set the base URL for Axios:

import { createApp } from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import router from './router'
import Axios from 'axios'

const app = createApp(App)
app.use(vuetify)
app.use(router)
app.mount('#app')

// Set the base URL for Axios requests
Axios.defaults.baseURL = 'http://localhost:8000/api'

Connecting Front-End to Back-End

Let’s create Vuetify components to interact with our API.

Creating a Posts List Component

Create a new component at src/components/PostsList.vue:

<template>
  <v-container>
    <v-card>
      <v-card-title>Posts</v-card-title>
      <v-card-text>
        <v-list>
          <v-list-item v-for="post in posts" :key="post.id">
            <v-list-item-title>{{ post.title }}</v-list-item-title>
            <v-list-item-subtitle>{{ post.content }}</v-list-item-subtitle>
          </v-list-item>
        </v-list>
      </v-card-text>
    </v-card>
  </v-container>
</template>

<script>
import Axios from 'axios'

export default {
  data() {
    return {
      posts: []
    }
  },
  mounted() {
    this.fetchPosts()
  },
  methods: {
    fetchPosts() {
      Axios.get('/posts')
        .then(response => {
          this.posts = response.data
        })
        .catch(error => {
          console.error('Error fetching posts:', error)
        })
    }
  }
}
</script>

Creating a Post Form Component

Create another component at src/components/PostForm.vue for creating new posts:

<template>
  <v-container>
    <v-card>
      <v-card-title>Create New Post</v-card-title>
      <v-card-text>
        <v-form @submit.prevent="submitForm">
          <v-text-field v-model="form.title" label="Title" required></v-text-field>
          <v-textarea v-model="form.content" label="Content" required></v-textarea>
          <v-btn type="submit" color="primary">Submit</v-btn>
        </v-form>
      </v-card-text>
    </v-card>
  </v-container>
</template>

<script>
import Axios from 'axios'

export default {
  data() {
    return {
      form: {
        title: '',
        content: ''
      }
    }
  },
  methods: {
    submitForm() {
      Axios.post('/posts', this.form)
        .then(response => {
          console.log('Post created:', response.data)
          this.form.title = ''
          this.form.content = ''
          this.$emit('post-created')
        })
        .catch(error => {
          console.error('Error creating post:', error)
        })
    }
  }
}
</script>

Integrating Components in the App

Update src/App.vue to include both components:

<template>
  <v-app>
    <v-main>
      <PostsList ref="postsList" />
      <PostForm @post-created="refreshPosts" />
    </v-main>
  </v-app>
</template>

<script>
import PostsList from './components/PostsList.vue'
import PostForm from './components/PostForm.vue'

export default {
  components: {
    PostsList,
    PostForm
  },
  methods: {
    refreshPosts() {
      this.$refs.postsList.fetchPosts()
    }
  }
}
</script>

Step 4: Testing the Connection

Start both servers:

• For Laravel: php artisan serve (defaults to http://localhost:8000).
• For Vuetify: npm run serve in the front-end directory (defaults to http://localhost:8080).

Visit http://localhost:8080 in your browser. You should see the list of posts (initially empty) and a form to create new posts. Try creating a post—the front-end should display the new post, demonstrating the connection between the Vuetify front-end and the Laravel back-end via API calls.

Additional Considerations

• Authentication: For a production application, secure the API using Laravel Sanctum or another authentication method.
• Error Handling: Enhance your components by displaying error messages with Vuetify's alert components.
• Styling: Customize your Vuetify theme in src/plugins/vuetify.js to match your design preferences.

Conclusion

By following these steps, you've successfully connected a Vuetify front-end to a Laravel 12 back-end API. This setup provides a scalable architecture where the front-end handles user interactions and the back-end manages data and business logic.

You can expand this example by adding more features like user authentication, pagination, or file uploads. This guide should give beginners a solid foundation for building modern single-page applications (SPAs) with Vuetify and Laravel.

Happy coding!