Vue Js Instant Prototyping | Test your Vue components in no time

What is Prototyping?

A prototype is an example that serves as a basis for future product like an application etc. Prototyping gives developers an opportunity to research new alternatives and test the existing design / functionality to confirm a product’s all over functionality prior to production. A prototype has many benefits, such as the developer and the implementer getting valuable feedback from the user even before the actual project is started.

What is Instant Prototyping Vuejs?

Imagine you got an idea of a component or you want to test out a component without actually building it inside your Vue Cli application i.e., you want a separate standalone component and you don’t want to setup a full Vue Cli project, configure the project etc. Well with the Instant Prototyping you don’t have to do that at all,
With Vue Js Instant Prototyping you can build up a component anywhere on your machine and preview it straight away with the <strong>vue serve</strong> and <strong>vue build</strong> commands

Getting started

Now that we’ve got a brief idea about Prototype & Vue Js Instant Prototyping, lets get our hands dirty & have some practical.

First off we need to install vue cli-service-global , open up your terminal and paste following

npm install -g @vue/cli-service-global

If in case you don’t have vue cli installed on your machine use following command instead

npm install -g @vue/cli @vue/cli-service-global

after successful installation you gonna see something like this

Basically this package has added vue serve & vue build command to vue cli that we can access from anywhere throughout our machine.

Lets create a standalone component

Create a component / file with name user.vue anywhere on your machine

As of now user.vue is empty as you can see in the image above, open up your terminal & type following command and hit enter

vue serve user.vue

it will spin up a local development server & hopefully your application will be up & running on http://localhost:8080/ as shown in the following image

If you go to http://localhost:8080/ in your browser you will see a blank page

Lets put some code inside user.vue , feel free to copy following code 🙂

<template>
  <div class="container">
    <div class="online-status">
      <div v-if="isOnline" class="online">
        <span class="light"></span>
        <p>{{userName}} is online</p>
      </div>
      <div v-else class="offline">
        <span class="light"></span>
        <p>{{userName}} is offline</p>
      </div>
    </div>
    <div>
      <button class="btn" @click="isOnline = !isOnline">Toggle Status</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "user",
  data() {
    return {
      isOnline: false,
      userName: "Ramdev"
    }
  },
}
</script>

<style lang="css" scoped>
.container {
  display: flex;
}
.btn {
  padding: 10px;
  margin-left: 20px;
}
.online-status {
  background: #dbdbdb;
  border: 1px dashed #ddd;
  display: inline-block;
  padding: 10px;
}
p {
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  color: #555;
}
.light {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 10px;
}
.online .light {
  background: limegreen;
}
.offline .light {
  background: crimson;
}
</style>

after you’ve done with the component type following command to test your component

vue serve user.vue

now go to http://localhost:8080/ you gonna see something like following

try clicking on Toggle Status button you will see status being changed in real time.

Happy Coding!