Contact.vue

This is where the user can contact Mapmama for any inquiries or feedback.

import

// Import Vue components for the NavigationBar and Footer
import NavigationBar from "../reusable-layout/NavigationBar.vue";
import Footer from "../reusable-layout/Footer.vue";
// Import Axios for making HTTP requests
import axios from "axios";

Above, we are importing the NavigationBar and Footer component which is a reusable layout because navigation bars and footers are usually same for each page so instead of writing it for each page, it's better to write it in one Vue page and import it in each page as components

Next, is the "axios" package which is used to make API call to the backend (Laravel). It is important because this is like the key that allows us to communicate with the backend.

export default

// Exporting the Vue component
export default {}

Inside this is where we define data, methods, computed properties, and lifecycle hooks.

components

// Register the imported components
components: {
  NavigationBar,
  Footer,
},

The components option is used to register and make Vue external components available for use within this component

data

// Data properties of the component
data() {
  return {
    domainBackend: "",
    name: "",
    phone: "",
    email: "",
    message: "",
  };
},

The data method is used to initialize and define the data properties for this component. See the source code to know what each variable is used for.

mounted

// Lifecycle hook: Executed when the component is mounted to the DOM
mounted() {
  // Scroll to the top of the window when the component is mounted
  window.scrollTo(0, 0);
  // Set the 'domainBackend' property using the Vuex store state
  this.domainBackend = this.$store.state.domainBackend;
},

This is called mounted lifecycle hook. The mounted hook is called after the component has been added to the DOM, making it a good place to perform initial setup and actions.

To explain what this mounted hook does:

1. It scrolls the window to the top so the user sees the content at the beginning of the page.

2. It gets the backend domain from what is defined in the Vuex.

methods

// Methods defined for the component
methods: {}

The methods option is used to define methods that can be called or triggered within a Vue component. These methods are typically used to define the behavior and functionality of the component.

sendContact

// Method to handle form submission
sendContact() {
  // Create an object 'request' containing the form data
  const request = {
    name: this.name,
    phone: this.phone,
    email: this.email,
    message: this.message,
  };
  // Make a POST request to the backend API endpoint with Axios
  axios
    .post(this.domainBackend + "/api/sendContact", request)
    .then((response) => {
      // Handle the response from the server
      // Check if the server indicates a successful form submission (SUCCESS equals 1)
      if (response.data.SUCCESS == 1) {
        // Display an alert to the user indicating that the form has been successfully submitted
        alert("FORM SUBMITTED.");
      }
    });
}

To explain what this sendContact method does:

1. It sends the user's details inputted in the contact form to the backend.

2. The backend will retrieve the user's details and send an email to Mapmama.

3. After the email is sent is successfully, it will alert the user on the success.