Vue Js Get Location From IP Address

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <h3>Vue Js Get Location From IP Address</h3>
        <p v-if="isLoading">Loading...</p>
        <p v-if="!isLoading && location">Location: {{ location.city }}, {{ location.region }}, {{ location.country_name
            }}</p>
        <p v-if="!isLoading && error">{{ error }}</p>
    </div>

axios.get(`https://ipapi.co/${ipAddress}/json/`)
                            .then(response => {
                                this.isLoading = false;
                                this.location = response.data;
                            })
                            .catch(error => {
                                this.isLoading = false;
                                this.error = error.message;
                            });
                    })
                    .catch(error => {
                        this.isLoading = false;
                        this.error = error.message;
                    });
            },
        });

</script>
    <style scoped>
        #app {
            font-family: Arial, sans-serif;
            padding: 20px;
        }

h3 {
            font-size: 24px;
            font-weight: bold;
        }

p {
            font-size: 16px;
            line-height: 1.5;
        }

p:first-of-type {
            margin-top: 0;
        }

p:last-of-type {
            color: red;
            font-weight: bold;
        }
    </style>
</body>

</html>