Tek Shinobi

In this series, we will be building front-end app Currency Converter using Vue and Vuetify.

The code for this is here. Please note that the code has been committed under commits matching with Parts. So for complete code for this tutorial, please refer to commit branch “part-1”.

Pre-requisites:

• Please ensure that npm-cli is installed. You can install node-js and it will install npm-cli as part of installation.
• Please ensure that vue-cli is installed. I am using the v3 vue cli.

Create project
vue create cc
create a project named cc
this step will also prompt for some defaults.

1. Preset: Manually select features -> here Make sure to check Router
2. it will also prompt if you want history mode in router. Say Y. We will use this to not include # in vue router urls
3. In the end, it will ask if you want to save the presets for other projects. I usually say no.

Check if everything went fine by running npm run serve

Then lets install Vuetify. I install Vuetify into vue as a plugin. This is the recommended way from vue-cli v3 onwards.
vue add vuetify

Run npm run serve again and make sure that default sit runs OK.

OK, so lets start coding.
First things first. We Look at src/views folder. This is the place we will be working most of the time. We will Notice that it has folder called views. In this folder go all the .vue that the router connects to. To see what router connects to, we goto router/index.js.

By default, it looks like this:

 
const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

It is pretty self explanatory. We are good to go. We do observe that the two routes mentioned are home and about. And in the src/views folder we see Home.vue and About.vue.

Modify Home.vue to this:

<template>https://tekshinobi.com/wp-admin/post.php?post=209&action=edit#
  <div class="home">
    
  </div>
</template>

<script>
// @ is an alias to /src


export default {
  name: 'home',
  components: {
    
  }
}
</script>

Now, we will make our very first component. The navbar.

Goto src/components and create a new file Navbar.vue and put this here:

<template>
  <header>
    <nav>
      <v-app-bar flat class="warning">
        <v-img
            :src="require('../assets/coins-icon.png')"
            contain
            max-height="50"
            max-width="50"
          ></v-img>
        <v-toolbar-title class="text-uppercase white--text mx-5">
          <span class="font-weight-bold">CC</span>
        </v-toolbar-title>
      </v-app-bar>
    </nav>
  </header>
  
</template>

<script>
export default {
  
};
</script>

Note that applying max-height and max-width max-height="50" max-width="50" is important otherwise v-img will overflow and push the span to all the way in the right.

Then add this component to the Home.vue view like so:

<template>
  <div class="home">
    <Navbar/>
  </div>
</template>

<script>
// @ is an alias to /src
import Navbar from '@/components/Navbar.vue'

export default {
  name: 'home',
  components: {
    Navbar
  }
}
</script>

Part-2 of this tutorial is here.