Creating a Search app with Vue.js + Parcel + TypeScript: Part 1 of 3
Tags: vue, parcel, typescript, javascript
Published: 2018-06-19 21:41:54

---
title: Creating a Search app with Vue.js + Parcel + TypeScript: Part 1 of 3
published: true
description: Part 1 of a series on creating a search app with modern tooling.
tags: #vue #parcel #typescript #javascript
---

In my previous article [here](https://dev.to/scottlepp/extending-traditional-software-with-serverless-microservices-442m) I showed how to "watch" an AWS S3 bucket for changes and update our search index real-time. Now lets write an app to show our search results using: [vue.js](https://vuejs.org/), [parcel](https://parceljs.org/), [typescript](https://www.typescriptlang.org/) and [sass](https://sass-lang.com/)

### Part 1: App setup

In this part, I'll show how we can quickly get our app set up thanks mostly in part to parcel.js: https://parceljs.org/

Prerequisite:  Install Node.js: https://nodejs.org/en/

What we'll install:
* parcel - our "zero configuration" bundler
* vue.js - our ui framework
* typescript - our coding language we'll use here
* sass - our styling language

Let's get ready to rock.

**Step 1**. Create a local directory to put your project (I'll assume you know how).

**Step 2**. Install Parcel
* open a terminal/command prompt and cd to your new directory
* paste or type the following:  `npm install -g parcel-bundler`

**Step 3**. Setup dependencies. Create a package.json file in your new folder. This defines all of our dependencies. Parcel can attempt to do this for you (though it didn't quite work for me). Instead here is the file you need. Just copy the contents into your new package.json:

{% gist https://gist.github.com/scottlepp/b2b1d8b9fb44b107b6d5e644b842ec87 %}

**Step 4**. Install dependencies. Run the command: `npm install`

**Step 5**. Add entry point.
* 5.1 Add index.html file as below
    * `div id="app"` is the "main" element (top level component of the component hierarchy)
    * script tag references our main.ts which sets up our Vue app as we will see

{% gist https://gist.github.com/scottlepp/c4090b0915d3da865f1ca5f167afa26b %}

* 5.2 Add main.ts file (this will reference our `div id="app"` element). This initializes Vue.

{% gist https://gist.github.com/scottlepp/88d74676e5fa05ef3d434cb43e65a5e6 %}

* 5.3 Add App.vue file. ".vue" files are called "single file components" where we can put the html, javascript, and css all in one file. I prefer separating concerns so I'll show an alternative approach.

{% gist https://gist.github.com/scottlepp/27c274cc663368b759db0e55b0ccc6e5 %}

As we see above, we're importing our typescript from a separate file. This has some advantages on larger components:
* If I need to change the javascript code, I don't have to scroll through the html
* In regards to "clean code" this feels cleaner to me keeping html, javascript and styling in separate files.

For smaller components, doing it all inline seems perfectly acceptable. Again, it's really just a matter of preference.

* 5.4 Add our typescript file: app-class.ts (app.ts and App.vue seem to collide in the bundler so I name the ts files [component]-class.ts to avoid collision)

{% gist https://gist.github.com/scottlepp/cd2b1bf377e679d4a1a10cced7eb5b7b %}

As you probably noticed, I'm using "vue-property-decorator" which allows annotation of our class properties. This will come in handy later.

**Step 6**. Run it! Run the command: `parcel index.html`
![Run](https://thepracticaldev.s3.amazonaws.com/i/fl21d8ttdbb3tl9clsb9.png)

Done! Open your browser at: http://localhost:1234/
![Run](https://thepracticaldev.s3.amazonaws.com/i/2og9pbdelinnmszqkga3.png)

If it didn't work for some reason you can clone the full project here:  https://github.com/scottlepp/search-vue-parcel-typescript


In [Part 2](https://dev.to/scottlepp/creating-a-search-app-with-vuejs--parcel--typescript-part-2-2ega) we'll layout our app and add a popular css framework: bootstrap. Bootstrap will make our app look professional and responsive.