VueJS GistPad Interactive Playground
Tags: vscode, vue, gistpad
Published: 2020-01-25 22:44:30

---
title: VueJS GistPad Interactive Playground
published: true
date: 2020-01-16 00:00:00 UTC
tags: VSCode,VueJS,GistPad
canonical_url: https://solrevdev.com/2020/01/16/vuejs-gistpad-interactive-playground.html
---

Recently I installed a VS Code extension called [GistPad](https://marketplace.visualstudio.com/items?itemName=vsls-contrib.gistfs) which from the marketplace docs says:

```
GistPad is a Visual Studio Code extension that allows you to manage GitHub Gists entirely within the editor. You can open, create, delete, fork, star and clone gists, and then seamlessly begin editing files as if they were local.
```

It is a great extension and I am using Gists way more now.

**Install**

To install launch VS Code Quick Open (<kbd>Ctrl</kbd>+<kbd>P</kbd>), paste the following command, and press enter.

`ext install vsls-contrib.gistfs`

The [marketplace docs](https://marketplace.visualstudio.com/items?itemName=vsls-contrib.gistfs) are a great place to start reading up about it.

**GistPad Interactive Playgrounds**

Another neat feature is the interactive playgrounds which again from the marketplace docs explain :

```
If you're building web applications, and want to create a quick playground environment in order to experiment with HTML, CSS or JavaScript (or Sass/SCSS, Less, Pug and TypeScript), you can right-click the Your Gists node and select New Playground or New Secret Playground. This will create a new gist, seeded with an HTML, CSS and JavaScript file, and then provide you with a live preview Webview, so that you can iterate on the code and visually see how it behaves.
```

I am a big fan of VueJS so I decided to spin up a new interactive playground choosing VueJS from the menu that appears.

There is a nice hello world style template that you can use to get started with.

**UK Police Data**

Rather than displaying weather data or random data, I decided to use crime data for Oxfordshire from [Data.Police.UK](https://data.police.uk/docs/) which seemed an interesting dataset to play around with.

I started by reading the docs and looking the example request which takes pairs of lat/long coordinates to describe an area:

`https://data.police.uk/api/crimes-street/all-crime?poly=52.268,0.543:52.794,0.238:52.130,0.478&date=2017-01`

I then found [this site](https://www.doogal.co.uk/polylines.php) which allowed me to draw an area and then get those lat/lon coordinates.

Then looking at the sample JSON response back from the API I then had enough to get started on my VueJS GistPad Interactive Playground:

```js
[
    {
        "category": "anti-social-behaviour",
        "location_type": "Force",
        "location": {
            "latitude": "52.640961",
            "street": {
                "id": 884343,
                "name": "On or near Wharf Street North"
            },
            "longitude": "-1.126371"
        },
        "context": "",
        "outcome_status": null,
        "persistent_id": "",
        "id": 54164419,
        "location_subtype": "",
        "month": "2017-01"
    },
    {
        "category": "anti-social-behaviour",
        "location_type": "Force",
        "location": {
            "latitude": "52.633888",
            "street": {
                "id": 883425,
                "name": "On or near Peacock Lane"
            },
            "longitude": "-1.138924"
        },
        "context": "",
        "outcome_status": null,
        "persistent_id": "",
        "id": 54165316,
        "location_subtype": "",
        "month": "2017-01"
    },
    ...
]

```

**VueJS GistPad Interactive Playground**

Right-clicking in the GistPad tab in VSCode showed me a menu allowing me to create either a public or private interactive playground.

The template is plenty to get started with.

It gives you 3 files to edit and a preview pane that refreshes whenever you make a change which is an excellent developer inner loop.

![2020-01-16_11-23-46_gistpad.png](https://solrevdev.com//media/2020-01-16_11-23-46_gistpad.png)

![2020-01-16_11-24-59_gistpad_playground.png](https://solrevdev.com//media/2020-01-16_11-24-59_gistpad_playground.png)

So after some trial and error, these were my 3 files all [associated with a GitHub Gist](https://gist.github.com/solrevdev/41a7adb028bb10c741153f58b36d01fe)

{% gist https://gist.github.com/solrevdev/41a7adb028bb10c741153f58b36d01fe %}

**The end result**

The GistPad toolbar has an icon that allows you to open a console to view the output of your `console.log` statements and I soon had a working version.

If you would like to see my Police Data sample try this link:

[https://gist.github.com/solrevdev/41a7adb028bb10c741153f58b36d01fe](https://gist.github.com/solrevdev/41a7adb028bb10c741153f58b36d01fe)

All in all, it’s an excellent experience.

If VueJS isn’t your thing then react is an option and typescript versions of both these frameworks are available and it’s open for more templates to be submitted to them.

Success 🎉