You can start hacking away with Vue (and Axios) without NPM. One simple html-file is all you need. In this post I will show you how with an example based on the official Vue.js guides.
I wanted to create a simple frontend to show some data from a REST API. I wanted to use a modern framework but I didn't wanted to bother with Node and NPM. Luckily with Vue.js thats really easy to do!
Vue.js can be easily included using a script-tag and the same goes for Axios.
Below you find a working example of the official Vue.js Using Axios to Consume APIs example in copy-paste-able html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Vue</title>
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<h1>Bitcoin Price Index</h1>
<div v-for="currency in info" class="currency">
{{ currency.description }}:
<span v-html="currency.symbol"></span>{{ currency.rate_float | currencydecimal }}
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
info: null
},
mounted () {
axios.get('https://api.coindesk.com/v1/bpi/currentprice.json')
.then(response => this.info = response.data.bpi);
}
});
</script>
</body>
</html>
The same is also possible with (but not limited to):
Top comments (0)