Part 2/2 of the 2024 course on building a full-stack CRUD app with Vue.JS and Laravel 11 API with Authentication

Welcome to Part 2 of the Vue.js full-stack CRUD app with Laravel 11 API with Authentication course for 2024! In this part of the tutorial, we will continue building our CRUD (Create, Read, Update, Delete) application using Vue.js and Laravel API. In Part 1, we have set up the project structure, created the database schema, and implemented the backend API using Laravel. Now, we will proceed to create the frontend using Vue.js to interact with the API.

Step 1: Setting up the Vue.js Project
First, let’s create a new Vue.js project using the Vue CLI. If you haven’t installed the Vue CLI yet, you can do so by running the following command in your terminal:

npm install -g @vue/cli

Next, create a new Vue.js project with the following command:

vue create my-crud-app

Choose the default preset for the project setup. Once the project is created, navigate to the project directory and install Axios, a popular HTTP client for making AJAX requests:

cd my-crud-app
npm install axios

Step 2: Creating Components
In Vue.js, components are reusable building blocks for your application. Let’s create components for the CRUD operations:

1. Create a ListPosts.vue component to display a list of posts:

<template>
  <div>
    <ul>
      <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      posts: []
    };
  },
  mounted() {
    this.fetchPosts();
  },
  methods: {
    fetchPosts() {
      axios.get('http://localhost:8000/api/posts')
        .then(response => {
          this.posts = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
}
</script>

1. Create a CreatePost.vue component to add a new post:

<template>
  <div>
    <input type="text" v-model="title" placeholder="Enter post title">
    <button @click="addPost">Add Post</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: ''
    };
  },
  methods: {
    addPost() {
      axios.post('http://localhost:8000/api/posts', { title: this.title })
        .then(response => {
          // Clear input field
          this.title = '';
          // Fetch updated list of posts
          this.$emit('postAdded');
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
}
</script>

1. Create an EditPost.vue component to update an existing post:

<template>
  <div>
    <input type="text" v-model="title" placeholder="Enter new post title">
    <button @click="updatePost">Update Post</button>
  </div>
</template>

<script>
export default {
  props: ['post'],
  data() {
    return {
      title: this.post.title
    };
  },
  methods: {
    updatePost() {
      axios.put(`http://localhost:8000/api/posts/${this.post.id}`, { title: this.title })
        .then(response => {
          // Fetch updated list of posts
          this.$emit('postUpdated');
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
}
</script>

1. Create a DeletePost.vue component to delete a post:

<template>
  <div>
    <button @click="deletePost">Delete Post</button>
  </div>
</template>

<script>
export default {
  props: ['postId'],
  methods: {
    deletePost() {
      axios.delete(`http://localhost:8000/api/posts/${this.postId}`)
        .then(response => {
          // Fetch updated list of posts
          this.$emit('postDeleted');
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
}
</script>

Step 3: Integrating Components in App.vue
Finally, let’s integrate these components in the App.vue file:

<template>
  <div>
    <ListPosts @postAdded="fetchPosts" @postUpdated="fetchPosts" @postDeleted="fetchPosts" />
    <CreatePost @postAdded="fetchPosts" />
  </div>
</template>

<script>
import ListPosts from './components/ListPosts.vue';
import CreatePost from './components/CreatePost.vue';

export default {
  components: {
    ListPosts,
    CreatePost
  },
  methods: {
    fetchPosts() {
      this.$refs.listPosts.fetchPosts();
    }
  }
}
</script>

And that’s it! You have now successfully created a Vue.js full-stack CRUD application with Laravel API and Authentication. Feel free to further customize the application by adding more features and functionalities. Thank you for following along with this tutorial, and I hope you found it helpful. Happy coding!