I'm facing an issue while trying to integrate the Axios package into my Vue 3 project that is not CLI-based. I initially attempted to include the package within the script tags at the top of the page, but that approach failed. Next, I tried creating a new variable for axios and directly passing the URL of the axios package to it, but even that didn't work as expected. How can I properly set up the Axios package in my project?
Below is the code snippet:
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<div id="demo" class="min-h-full bg-gray-200">
<!-- UI -->
</div>
<script>
const { axios } = "https://unpkg.com/axios/dist/axios.min.js";
const { onMounted, ref, computed } = Vue
const app = Vue.createApp({
const cities = ref()
setup() {
const getData = async (e) => {
if (e.key == "Enter") {
try {
const res = await axios.get(
`https://api.openweathermap.org/data/2.5/weather?zip={enterzipcodehere},US&appid={youropenweathermapidhere}&units=imperial`
)
cities.value = res.data.name
console.log(cities.value)
} catch (error) {
console.log(error)
}
}
}
onMounted(() => {
getData()
}
}
})
app.mount('#demo')
</script>