Part 3: Integrating TypeScript into Laravel & Vue.js – AI Blog

Welcome to Part 3 of our tutorial series on creating an AI Blog using Laravel, Vue.js, and TypeScript! In this tutorial, we will continue building our blog application by implementing the backend functionality for managing blog posts. We will also set up a basic frontend interface for displaying and interacting with the blog posts.

If you haven’t already, make sure you have completed Part 1 and Part 2 of the tutorial series. In Part 1, we set up the Laravel backend API for the blog application, and in Part 2, we integrated Vue.js with TypeScript into the project.

Let’s dive right in!

Step 1: Setting Up the Backend

First, let’s create a controller for managing blog posts. Run the following command in your terminal to create a new controller:

php artisan make:controller PostController

Next, open the generated PostController.php file located in the app/Http/Controllers directory. Add the following methods to handle CRUD operations for blog posts:

use AppModelsPost;
use IlluminateHttpRequest;

class PostController extends Controller
{
    public function index()
    {
        $posts = Post::all();

        return response()->json($posts);
    }

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

        $post = Post::create($data);

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

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

        $post->update($data);

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

    public function destroy(Post $post)
    {
        $post->delete();

        return response()->json(['message' => 'Post deleted']);
    }
}

Don’t forget to add the necessary routes for these controller actions in your routes/api.php file:

use AppHttpControllersPostController;

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

Step 2: Setting Up the Frontend

Now let’s create a new Vue.js component for displaying the list of blog posts and allowing users to create, update, and delete posts. In your resources/js/components directory, create a new file named PostList.vue and add the following code:

<template>
    <div>
        <h2>Blog Posts</h2>
        <ul>
            <li v-for="post in posts" :key="post.id">
                <h3>{{ post.title }}</h3>
                <p>{{ post.content }}</p>
                <button @click="editPost(post)">Edit</button>
                <button @click="deletePost(post)">Delete</button>
            </li>
        </ul>
        <form @submit.prevent="createPost">
            <input type="text" v-model="newPost.title" placeholder="Title">
            <textarea v-model="newPost.content" placeholder="Content"></textarea>
            <button type="submit">Create Post</button>
        </form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            posts: [],
            newPost: {
                title: '',
                content: '',
            },
        };
    },
    methods: {
        async fetchPosts() {
            const response = await axios.get('/api/posts');
            this.posts = response.data;
        },
        async createPost() {
            await axios.post('/api/posts', this.newPost);
            this.fetchPosts();
            this.newPost = {
                title: '',
                content: '',
            };
        },
        async editPost(post) {
            // Implementation for editing post
        },
        async deletePost(post) {
            await axios.delete(`/api/posts/${post.id}`);
            this.fetchPosts();
        },
    },
    mounted() {
        this.fetchPosts();
    },
};
</script>

In this component, we are listing all blog posts, allowing users to create new posts, and providing buttons to edit and delete existing posts.

Don’t forget to import and register this component in your main Vue.js app file. You can also customize the styling of the blog posts list as per your requirements.

Step 3: Testing the Application

Finally, test your application by running the backend server using php artisan serve and the frontend server using npm run watch. Navigate to http://localhost:8000 in your browser to see the blog application in action.

Congratulations on completing Part 3 of our tutorial series on creating an AI Blog using Laravel, Vue.js, and TypeScript! In the next part, we will enhance the frontend interface and add authentication functionality to the application. Stay tuned for more exciting developments!