Opublikowane w

Vue – deliver your PoC faster

Let’s talk about VueJs. If you want to hear more about this topic, please let me know in the comment section and I will be happy to create a series of posts around this one. Today I will tell you:

  • Why you should consider Vue?
  • When to use Vue?
  • How to start with Vue?

Why consider Vue

Here are some pros of Vue.

  • Tiny size – the downloaded zip weighs 18 KB
  • Virtual DOM rendering and performance
  • Reactive two-way data binding
  • Easy to learn – basic knowledge of HTML, CSS, and javascript will be more than enough to start
  • Solid tooling ecosystem – SSR (Server-side rendering), state management

When to use Vue?

There are a couple of different scenarios where Vue would be a great fit.
The obvious one is creating a Proof of Concept (PoC) solution from the scratch. In a few minutes, you can have a working project configured.
Another use case that I have in mind is rewriting chosen parts of the existing product. Let’s say you would like to test an extra payment method on your existing site. Normally it would take a month or so to make it happen in your current technology stack. In Vue, the same job will take way less time and since it will be written from the scratch, adding more methods in the future will be easier.
There are a lot more situations where using Vue would be a good fit – let me know if you want to hear about those.

How to start with Vue

To start with Vue you can create index.html file in your folder and place the code below in it:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue start</title>
</head>
<body>
    <div id="app"></div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            template: '<p>{{message}}</p>',
            data() {
                return {
                    message: 'Hello message'
                };
            },
        })
    </script>
</body>
</html>

Then you need to open this file in the browser of your choice. It’s the simplest way to start exploring Vue. However, even for PoC I would recommend investing a bit more time into bringing Vue to life – here is how to do it.

First of all, you will need to install prerequisites (list below):

  • install nodejs LTS (latest long time support version – now the latest available version is 14.15.1)
  • npm install --global @vue/cli

I also recommend using VSC editor due to availability of snippets.

Firstly, you can generate Vue project using this command vue create project_name -d. If you like using typescript in a project you can do that by going to the newly created folder and run vue add typescript. Secondly, open the terminal inside VSC and execute the command npm run serve. It will start the node server for you. Go to the browser and open http://localhost:8080 (put your port instead of 8080 if you changed it). The below image should be visible to you now. From now on all changes in this project’s files will be updated on the go in your browser window.

Hope this was useful – feel free to share your thoughts and observations about Vue – looking forward to hear from you!

Till next read!
Lukasz

PS. You might be interested in a series about smart contract development (those are written in Polish only just so you know 😉 ). Don’t worry if you missed it – you can check it out anytime here.