Trying Vue without NPM

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):

React
Old school AngularJS

Blog

Trying Vue without NPM

Van Balken

Join Our Newsletter. No Spam, Only the good stuff.

Related