How to create a reporting application using Vue 3 and the Composition API?

Vue is a JavaScript framework that allows developers to create web applications. It is mainly used for building single-page web applications. There are many benefits of using vue to create web applications, such as simple structure, lightweight, component-based architecture, etc.

Before starting this tutorial, let's take a look at the reporting application and composition API.

Reporting applications are single- or multi-page web applications that display useful data in an appropriate format, such as a table format. It is used for reports that display data in a specific format.

The composition API allows developers to code based on logic rather than lifecycle. We can create more maintainable and modular code in vue applications.

Now, we will use the "https://jsonplaceholder.typicode.com/posts" API to get the data and format all the data in the table in the vue application.

Users should follow the steps below to start creating a vue application.

• Step 1 - In the first step, the user needs to install vue on the local computer. Open a terminal and execute the following commands.

npm install -g @vue/cli

• Step 2 - Now enter the following command in the terminal to start the vue application. Here, "reporting-app" is the application name.

npx vue create reporting-app

• Step 3 - We have successfully created the vue application. Now, run the following command in the terminal to enter the project directory.

cd reporting-app

• Step 4 - Next, we need to install the required dependencies in the vue application by executing the following command in the terminal.

npm install axios vue-router

We installed axios to make API requests and vue-router to handle routing for the application.

• Step 5 - Now, create a “router.js” file in the “src” project directory. After that, add the following code in the file.

File name – router.js

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from './views/HomeView.vue'
import ReportTable from './views/ReportTable.vue'
const routes = [{
      path: '/',
      name: 'home',
      component: HomeView
   },{
      path: '/report',
      name: 'report',
      component: ReportTable
   }
]
const router = createRouter({
   history: createWebHistory(),
   routes
})
export default router

We imported the HomeView and ReportTable components in the above code from related files. After that, we created the "/" and "/report" routers and exported them.

• Step 6 - Set up the application's router configuration in the "main.js" file. Add the following code in the main.js file.

File name – main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')

In the above code, we imported the router component and used it with the application through the app.use() method.

• Step 7 - Next, we need to set up the "App.vue" file to display specific router-based components. Add the following content to the App.vue file.

File name – App.vue

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from './views/HomeView.vue'
import ReportTable from './views/ReportTable.vue'
const routes = [{
      path: '/',
      name: 'home',
      component: HomeView
   },{
      path: '/report',
      name: 'report',
      component: ReportTable
   }
]
const router = createRouter({
   history: createWebHistory(),
   routes
})
export default <template>
   <div id="app">
      <router-view />
   </div>
</template>
<script>
   export default {
      name: "App",
   };
</script>

• Step 8 - Now, we will create the components that will be rendered on the web page. First, create the 'views' folder in the 'src' directory and create the 'homeview.vue' file in it.

After

, add the following code in the file.

File name – Homeview.vue

<template>
   <div>
      <h1> Home </h1>
   </div>
</template>
<script>
   export default {
     name: 'HomeView'
   }
</script>

In the above code, we render "Home" on the web page.

• Step 9 - Now, we need to create the ReportTable.vue component in the “views” directory. After that, add the following code in the file.

File name – ReportTable.vue

<template>
   <div class = "report">
      <h1 class = "report-heading"> Report </h1>
      <!-- Creating the table -->
      <table class = "report-table">
         <thead>
            <tr>
               <th> User ID </th>
               <th> ID </th>
               <th> Title </th>
               <th> Body </th>
            </tr>
         </thead>
         <tbody>
            <!-- Iterating through the reports and showing every report one by one -->
            <tr v-for = "report in state.reports" :key = "report.id">
               <td> {{ report.userId }} </td>
               <td> {{ report.id }} </td>
               <td> {{ report.title }} </td>
               <td> {{ report.body }} </td>
            </tr>
         </tbody>
      </table>
   </div>
</template>
<script>
   import { reactive, onMounted } from "vue";
   import axios from "axios";
   export default {
      setup() {
         // using the composition API
         const state = reactive({
            reports: [],
         });
         // fetching data on the mount, and storing response in the reports array
         onMounted(() => {
            axios
            .get("https://jsonplaceholder.typicode.com/posts")
            .then((response) => {
            state.reports = response.data;
            })
            .catch((error) => {
               console.log(error);
            });
         });
         return { state };
      },
   };
</script>
<style>
   /* Styling the table */
   .report {
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      font-family: Arial, sans-serif;
      color: #333;
   }
   .report-heading {
      font-size: 28px;
      font-weight: bold;
      margin-bottom: 20px;
      text-align: center;
   }
   .report-table {
      width: 100%;
      border-collapse: collapse;
   }
   .report-table th {
      background-color: #333;
      color: #fff;
      padding: 10px;
      text-align: left;
      font-size: 18px;
   }
   .report-table td {
      background-color: #f5f5f5;
      padding: 10px;
      font-size: 16px;
   }
   .report-table tr:hover {
      background-color: #ddd;
   }
</style>

In the above code, we use the "reactive" function of the composition API to create a reactive state object containing the "reports" array.

Whenever a component is installed on a web page, we use the "onMount()" method to get data from the API via axios. After that we store the response in the reports array and return the status object.

We created tables to represent the data in the template code. After that, we access the reports array from the states object and use a for loop to iterate through all the data and display them in the table rows. Additionally, we styled the table.

Here, users can observe that we are not using the component lifecycle to update the data because we are using the composition API to make the state object reactive. So every time the API's response updates, it automatically re-renders the data.

• Step 10 - Execute the following command in the project directory to run the project.

npm run serve

Now, users should open the http://192.168.110.33:8080/report URL to view the API data in tabular format. It will display the output as shown below.

Users learned how to use the functionality of the composition API in this tutorial. As mentioned above, when we use the composition API, we don't need to deal with lifecycle as we can make the variable or object reactive using the "reactive()" function. Additionally, users can try out the composition API that updates data and observe how it re-renders the web page when reactive variables are updated.

The above is the detailed content of How to create a reporting application using Vue 3 and the Composition API?. For more information, please follow other related articles on the PHP Chinese website!