Forem: Patricia Namoro

My Realizations About Getting a Job as a Junior Developer

Patricia Namoro — Tue, 27 Dec 2022 13:12:43 +0000

As 2022 ends, I’ve come to my senses and decided to share my realizations about getting a job as a junior developer. 😄

Let me tell you my story 🤗

Back in college, I used to look down on myself and kept thinking I couldn’t make it. I believed I wouldn’t get a job in the IT industry. I even imagined that after graduating, I’d just take teaching methods and end up teaching in college.

But to be honest, there are a lot of opportunities for IT graduates—you just have to figure out what skills you want to build and what career path in IT you want to pursue.

When I was still a student, I was undecided about what career path to take, but I was interested in game development, mobile apps, and cybersecurity. 😎

Learning is fun in IT—you’re always solving problems and creating solutions through hardware and software development. I enjoyed working on my laptop and doing projects on my own. As an introvert, this was an advantage because I didn’t need to constantly communicate with other people—I could just focus and get the job done.

Of course, there were times when I doubted my skills and struggled to finish projects. If you’re feeling that way right now, it’s okay. Imposter syndrome happens to everyone. We don’t need to know everything. But we shouldn’t stop learning. We’re all works in progress. Don’t be afraid to ask questions and keep exploring.

Now, I’m working as a web developer and designer—and sometimes I still can’t believe it myself. Here are some tips I can give you to stay motivated and land a job as a developer:

💡 Tips for College Students in IT/CS

Keep Studying and Practicing

Create as many projects as you can. Follow tutorials, stay curious about new technologies, and keep up to date. The projects you build will not only improve your skills but can also be showcased to hiring managers.
Learn Git and GitHub

One of my regrets in college was not learning Git and GitHub earlier. Version control is extremely useful—you can track changes, commits, and save your code in repositories. Most IT companies prefer candidates who know version control tools.
Join Tech Communities

This gives you the chance to meet experienced developers. You can ask them questions about software development and even get advice about your career path. Mentors are usually kind and willing to help. Just remember—don’t rely on spoon-feeding. The goal is to learn.
Join Contests and Organizations

Competitions and research projects allow you to showcase your skills and contribute to the community. Plus, you can add these to your resume.
Work on Communication Skills

This was difficult for me as a shy person, but it’s important. Interviews require confidence, clarity, and honesty about your skills. Practicing public speaking and doing mock interviews can help you improve and prepare.
Just Apply

Don’t get discouraged by rejections. Out of hundreds of applications, one company will see your potential. Treat it like a mutual introduction—you’re getting to know them as much as they’re getting to know you.
Get an Internship

Internships give you hands-on experience in a real work environment. They’re especially valuable if they’re related to your chosen career path, and hiring managers often look for this when considering fresh graduates.
Prepare a Good Resume

Keep it neat, clear, and direct. You don’t need to include a photo. Focus on contact details, education, work experience, tech stack, certificates, and projects you want to showcase.

Final Thoughts

And that’s it! Just be yourself, and I hope these realizations will help you land a job as a developer.

✨ Never stop learning, and keep grinding! 😉

💬 Comment below if you have questions—I’d love to hear from you. 😁

Useful Git Commands for Beginners

Patricia Namoro — Sun, 15 May 2022 08:17:18 +0000

Are you looking for a tutorial that will help you to understand on how git works? I create a simple git tutorial just for you!

Setting up your Environment

Pick the text editor of your choice : You can use Visual Studio Code, Brackets, Sublime or Atom
Choose your Browser : Personally, I preferred Chrome as my web browser and you can choose Mozilla Firefox, Microsoft Edge or Brave. I use Chrome as my default web browser.
Command line shell : Familiarity with the command-line shell is needed. A cmd window or power shell with admin rights would be required on Windows. A terminal window can be used on a Mac or in Linux. Please learn how to use the "sudo" command in both OS X and Linux.

Now let's try to learn Git!

Setting up Git

Download and Install Git

To install Git on your computer, go to https://git-scm.com/downloads to download the Git installer for your specific computing platform.
Then, follow the installation steps as you install Git using the installer.
You can find more details about installing Git at https://git-scm.com/book/en/v2/Getting-Started-Installing-Git. This document lists several ways of installing Git on various platforms.
Installing some of the GUI tools like GitHub Desktop will also install Git on your computer.
On a Mac, setting up XCode command-line tools also will set up Git on your computer.
You can choose any of the methods that is most convenient for you.

Configuration on Git

Open a cmd window or terminal on your computer.
Check to make sure that Git is installed and available on the command line, by typing the following at the command prompt:

git --version

To configure your user name to be used by Git, type the following at the prompt:

git config --global user.name "Your Name"

To configure your email to be used by Git, type the following at the prompt:

git config --global user.email <your email address>

You can check your default Git global configuration, you can type the following at the prompt:

git config --list

Basic Git Commands

At a convenient location on your computer, create a folder named git-test.
Open this git-test folder in your favorite editor.
Add a file named index.html to this folder, and add the following HTML code to this file:

<!DOCTYPE html>
<html>
    <head></head>

    <body>
        <h1>This is a Header</h1>
    </body>
</html>

Initializing the folder as a Git repository

Go to the git-test folder in your cmd window/terminal and type the following at the prompt to initialize the folder as a Git repository:

git init

Checking your Git repository status

Type the following at the prompt to check your Git repository's status:

git status

Adding files to the staging area

To add files to the staging area of your Git repository, type:

git add .

Commiting to the Git repository

To commit the current staging area to your Git repository, type:

git commit -m "first commit"

Checking the log of Git commits

To check the log of the commits to your Git repository, type

git log --oneline

Now, modify the index.html file as follows:

<!DOCTYPE html>
<html>
    <head></head>

    <body>
        <h1>This is a Header</h1>
        <p>This is a paragraph</p>
    </body>
</html>

Add a sub-folder named templates to your git-test folder, and then add a file named test.html to the templates folder. Then set the contents of this file to be the same as the index.html file above.
Then check the status and add all the files to the staging area.
Then do the second commit to your repository
Now, modify the index.html file as follows:

<!DOCTYPE html>
<html>
    <head></head>

    <body>
        <h1>This is a Header</h1>
        <p>This is a paragraph</p>
        <p>This is a second paragraph</p>
    </body>
</html>

Now add the modified index.html file to the staging area and then do a third commit.

Checking out a file from an earlier commit

To check out the index.html from the second commit, find the number of the second commit using the git log, and then type the following at the prompt:

git checkout <second commit's number> index.html

Resetting the Git repository

To discard the effect of the previous operation and restore index.html to its state at the end of the third commit, type:

git reset HEAD index.html

Then type the following at the prompt:

git checkout -- index.html

You can also use git reset to reset the staging area to the last commit without disturbing the working directory.

Here are some useful commands that may help you and try!

Pushing a new commit


git checkout -b <branch-name>
git init
git status
git add <specify path to commit files>
git commit -m "<commit message>"
git push origin <remote-branch>
git diff
git log --oneline

Applying commit on an exisiting branch

git fetch
git pull origin <master-branch>
git status
git add <specify path to commit files>
git commit -m "solved git conflicts"
git push origin <branch-name>

For Remote Branch deletion

git push --delete origin your-trash-branch

For Creating New Branch

cd existing_repo
git remote add origin git_url_of_your_repository
git branch -M branch_name_here
git push -uf origin branch_name_here

For Merge Conflicts

npm run prod
git commit 
ctrl + c 
:qa
git push

Now that you understand the basics of git commands. You can try to git and push your code in your own repository. If you have suggestions and comments. Feel free to comment down below. Happy coding!

credits to : Front-End Web UI Frameworks and Tools: Bootstrap 4

Getting Started to Vue 3

Patricia Namoro — Wed, 20 Apr 2022 04:54:51 +0000

Install NodeJS
https://nodejs.org/en/download/

Install Git
https://git-scm.com/downloads

Install Vue CLI
npm install -g @vue/cli

Install Vuex
npm install vuex --save

Install Vue Router
npm install vue-router --save

Create a Project
vue create vue-workshop

Dialog Option Selection:

Default (Vue 2)
Default (Vue 3)

Note: Use Vue 2 if you plan to use Vuex and/or Vue Router

Run Project
cd vue-workshop

Edit package.json (line 6)
vue-cli-service serve --host localhost

npm run serve

VueJS Basics

Reactivity

Reactivity.vue

<template>
  <div class="pad-top">
    The time is: {{ date }}
  </div>
</template>

<script>
export default {
  name: "Reactivity",
  data() {
    return {
      date: null,
    }
  },
  mounted() {
    setInterval(() => {
      this.date = (new Date()).toLocaleString()
    }, 1000);
  },
}
</script>

<style scoped>
</style>

Input Binding

InputBinding.vue

<template>
  <div class="pad-top">
    <span>Type your name:</span>
    <input
       class="margin-right"
       v-model="name"
    />
  </div>
  <div class="pad-top">
    Your name is {{ name }}!
  </div>
</template>

<script>
export default {
  name: "InputBinding",
  data() {
    return {
      name: ‘’,
    }
  },
}
</script>

<style scoped>
.pad-top {
  padding-top: 15px;
}
</style>

Element Visibility based on Input Binding

InputBindingVisibility.vue

<template>
  <div class="pad-top">
    <span>Type your name:</span>
    <input
       class="margin-right"
       v-model="name"
    />
  </div>
  <div class="pad-top" v-show="name !== ''">
    Your name is {{ name }}!
  </div>
</template>

<script>
export default {
  name: "InputBindingVisibility",
  data() {
    return {
      name: ‘’,
    }
  },
}
</script>

<style scoped>
.pad-top {
  padding-top: 15px;
}
</style>

Event Handling

EventHandling.vue

<template>
  <div>
    <button @click="toggleMe">Click me!</button>
  </div>
</template>

<script>
export default {
  name: "EventHandling",
  methods: {
    toggleMe() {
      alert(‘I was clicked!’);
    }
  }
}
</script>

<style scoped>
</style>

Conditional Rendering

ConditionalRendering.vue

<template>
  <div class="pad-top">
    <button @click="toggleMe">Click me!</button>
  </div>
  <div class="pad-top" v-if="toggleDiv">
    HOLA!
  </div>
</template>

<script>
export default {
  name: "ConditionalRendering",
  data() {
    return {
      toggleDiv: false,
    }
  },
  methods: {
    toggleMe() {
      this.toggleDiv = !this.toggleDiv
    }
  }
}
</script>

<style scoped>
.pad-top {
  padding-top: 15px;
}
</style>

List Rendering

ListRendering.vue

<template>
  <div>
    <div>
      Things to do:
    </div>
    <div>
      <ul>
        <li v-for="listItem in sampleList" :key="listItem.text">
          {{ listItem.text }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "ListRendering",
  data() {
    return {
      sampleList: [
        { text: 'Eat' },
        { text: 'Sleep' },
        { text: 'Be awesome' }
      ]
    }
  },
}
</script>

<style scoped>
</style>

Vue Component Lifecycle

Link

Vue Lifecycle Hooks

Link

Vue Lifecycle Hooks

Hooks.vue
<template>
  <div>
    <h1>Hello!</h1>
  </div>
</template>

<script>
export default {
  name: "Hooks",
  beforeCreate() {
    // Called after the instance has been initialized
    alert(‘beforeCreate triggered.’);
  },
  created() {
    // Called after the instance is created
    alert(‘created triggered.’);
  },
  beforeMount() {
    // Called right before the mounting begins
    alert(‘beforeMount triggered.’);
  },
  mounted() {
    // Called after the instance has been mounted
    alert(‘mounted triggered.’);
  },
  beforeUpdate() {
    // Called when data changes, before the DOM is patched
    alert(‘beforeUpdate triggered.’);
  },
  updated() {
    /**
     * Called after a data change causes the virtual DOM 
     * to be re-rendered and patched.
     */
    alert(‘updated triggered.’);
  },
  beforeUnmount() {
    // Called right before a component instance is unmounted
    alert(‘beforeUnmount triggered.’);    
  },
  unmounted() {
    // Called after a component instance has been unmounted
    alert(‘unmounted triggered.’);
  }
}
</script>

<style scoped>
</style>

Computed vs Methods: What to use?

Computed Properties:
cached based on their reactive dependencies
only re-evaluates when some of its reactive dependencies have changed

Methods:
no caching occurs
will always run the function whenever a re-render happens

TL:DR
Use Computed Properties when functionality reacts to DOM changes
Use Methods when functionality is triggered by a user event

ComputedProperties.vue

<template>
  <div>
    <div>Do I have things to do? {{ thingsToDo }}</div>
    <div>Things to do:</div>
    <ul>
      <li v-for="listItem in sampleList" :key="listItem.text">
        {{ listItem.text }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "ComputedProperties",
  computed: {
    thingsToDo() {
      /**
 * This statement’s result is cached and will only
       * re-evaluate when sampleList changes content,
       * saving computational power.
       */
      return this.sampleList.length > 0 ? 'Yes' : 'No'
    }
  },
  data() {
    return {
      sampleList: [
        { text: 'Eat' },
        { text: 'Sleep' },
        { text: 'Be awesome' }
      ]
    }
  },
}
</script>

<style scoped>
</style>

v-if vs v-show: What to use?

v-if:
is "real" conditional rendering
event listeners and child components are properly destroyed and re-created
DOM elements are properly destroyed and re-created
is “lazy”; i.e. DOM elements WILL NOT render unless condition is true on first load

v-show:
is always rendered regardless of condition
uses CSS to toggle elements ON and OFF
event listeners and child components stay rendered regardless of condition
DOM elements stay rendered when toggling ON and OFF

TL:DR

Use v-show if you need to toggle something very often
Use v-if if the condition is unlikely to change at runtime

ConditionalSample.vue

<template>
  <div>
    <div>
      <button @click=”toggleContent”>Click Me!</button>
    </div>
    <div v-if=”showContent”>
      <span>I am v-if rendered!</span>
    </div>
    <div v-show=”showContent”>
      <span>I am v-show rendered</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "ConditionalSample",
  data() {
    return {
      showContent: false
    }
  },
  methods: {
    toggleContent() {
      this.showContent = !this.showContent
    }
  }
}
</script>

<style scoped>
</style>

Components

When to use components:
Repeated functionality across multiple pages
Decoupling of long, mangled, spaghetti codebase

Component Data Flow:
To pass data from parent component to child component, use props
To pass data from child component back to parent component, use emit

How to use components

ParentComponent.vue

<template>
  <div>
    <div>Hi! I am a parent component.</div>
    <div>
      <ChildComponent />
    <div>
  <div>
</template>

<script>
import ChildComponent from “./ChildComponent”;

export default {
  name: “ParentComponent”,
  components: {
    ChildComponent
  }
}
</script>

<style scoped>
</style>

ChildComponent.vue

<template>
  <div>
    <div>Hi! I am a child component. {{ message }}</div>
  <div>
</template>

<script>
export default {
  name: “ChildComponent”,
  data() {
    return {
      message: ‘yay!’
    }
  }
}
</script>

<style scoped>
</style>

How to pass data to child component

ParentComponent.vue

<template>
  <div>
    <div>Hi! I am a parent component.</div>
    <div>
      <ChildComponent :message=”message”/>
    <div>
  <div>
</template>

<script>
import ChildComponent from “./ChildComponent”;

export default {
  name: “ParentComponent”,
  components: {
    ChildComponent
  },
  data() {
    return {
      message: ‘yay!’
    }
  }
}
</script>

<style scoped>
</style>

ChildComponent.vue

<template>
  <div>
    <div>Hi! I am a child component. {{ message }}</div>
  <div>
</template>

<script>
export default {
  name: “ChildComponent”,
  props: [
    'message'
  ],
}
</script>

<style scoped>
</style>

How to pass data to parent component

ParentComponent.vue

<template>
  <div>
    <div>Hi! I am a parent component.</div>
    <div>
      <ChildComponent
        :message=”message”
        @pass-message=”parseChildMessage”
      />
    <div>
  <div>
</template>

<script>
import ChildComponent from “./ChildComponent”;

export default {
  name: “ParentComponent”,
  components: {
    ChildComponent
  },
  data() {
    return {
      message: ‘yay!’
    }
  },
  methods: {
    parseChildMessage(message) {
      alert(‘Yay! Child component says ’ + message);
    }
  }
}
</script>

<style scoped>
</style>

ChildComponent.vue

<template>
  <div>
    <div>Hi! I am a child component. {{ message }}</div>
    <div>
      <button @click=”sendBack”>Click Me!</button>
    </div>
  <div>
</template>

<script>
export default {
  name: “ChildComponent”,
  props: [
    'message'
  ],
  methods: {
    sendBack() {
      this.$emit(‘passMessage’, ‘Hello!’);
    }
  }
}
</script>

<style scoped>
</style>

Vuex

What it is:
a state-management pattern + library
a centralized store for all components
has rules ensuring that the state can only be mutated in a predictable fashion
used in building large-scale Single-Page Applications

Vuex Core Concepts

State
Vuex uses a single state tree
a single object contains all application-level state
serves as the "single source of truth."
Vuex follows the same rules as the data in a Vue instance
reactive

Getters
considered as computed properties for stores
result is cached based on its dependencies
will only re-evaluate when some of its dependencies have changed

Mutations
the only way to actually change state in a Vuex store
mutations are very similar to events
each mutation has a string type and a handler.
handler function is where actual state modifications are performed
handler function receives state as the first argument

Actions
are similar to mutations, with key differences
actions commit mutations instead of mutating the state
actions can contain arbitrary asynchronous operations
mutations have to be synchronous, while actions does not have to be

Modules

allows Vuex to divide store into modules
each module can contain its own state, mutations, actions, getters

References:
https://vuex.vuejs.org/guide/state.html
https://vuex.vuejs.org/guide/getters.html
https://vuex.vuejs.org/guide/mutations.html
https://vuex.vuejs.org/guide/actions.html
https://vuex.vuejs.org/guide/modules.html

How to Setup Vuex in a Project

src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({})

export default store


src/main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store/index'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  store
}).$mount('#app')

How to add store state

src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    todoList: [
      { value: ‘Code’ }
    ]
  },
})

export default store

SampleComponent.vue

<template>
  <div>
    <tr v-for="(item, index) in todoList" :key="index">
      <td>{{ item.value }}</td>
    </tr>
  </div>
</template>

<script>
export default {
  name: ‘SampleComponent’,
  computed: {
    todoList() {
      return this.$store.state.todoList
    }
  }
}
</script>

<style scoped>
</style>

How to add store getters

src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    todoList: [
      { value: ‘Code’ }
    ]
  },
  getters: {
    todoList: state => {
      return state.todoList
    }
  },
})

export default store

SampleComponent.vue

<template>
  <div>
    <tr v-for="(item, index) in todoList" :key="index">
      <td>{{ item.value }}</td>
    </tr>
  </div>
</template>

<script>
export default {
  name: ‘SampleComponent’,
  computed: {
    todoList() {
      return this.$store.getters.todoList
    }
  }
}
</script>

<style scoped>
</style>

How to add store mutations

src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    todoList: [
      { value: ‘Code’ }
    ]
  },
  getters: {
    todoList: state => {
      return state.todoList
    }
  },
  mutations: {
    addTodoItem(state, value) {
      state.todoList.push({value: value})
    },
    removeTodoItem(state, value) {
      state.todoList.splice(value, 1)
    }
  }
})

export default store

SampleComponent.vue

<template>
  <div>
    <div>
      <span>Add Item: </span>
      <input v-model="todoInput" />
      <button @click="addItem">Add Item</button>
    </div>
    <div>
      <tr v-for="(item, index) in todoList" :key="index">
        <td>
          <button @click="removeItem(index)">X</button>
        </td>
        <td>{{ item.value }}</td>
      </tr>
    <div>
  </div>
</template>

<script>
export default {
  name: ‘SampleComponent’,
  computed: {
    todoList() {
      return this.$store.getters.todoList
    }
  },
  data() {
    return {
      todoInput: ‘’
    }
  },
  methods: {
    addItem() {
      this.$store.commit('addTodoItem', this.todoInput)
    },
    removeItem(index) {
      this.$store.commit(‘removeTodoItem’, index)
    }
  }
}
</script>

<style scoped>
</style>

How to add store actions

src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    todoList: [
      { value: ‘Code’ }
    ]
  },
  getters: {
    todoList: state => {
      return state.todoList
    }
  },
  mutations: {
    addTodoItem(state, value) {
      state.todoList.push({value: value})
    },
    removeTodoItem(state, value) {
      state.todoList.splice(value, 1)
    }
  },
  actions: {
    addItem (context, item) {
      context.commit('addTodoItem', item)
    },
    removeItem(context, itemIndex) {
      context.commit('removeTodoItem', itemIndex)
    }
  }
})

export default store

SampleComponent.vue

<template>
  <div>
    <div>
      <span>Add Item: </span>
      <input v-model="todoInput" />
      <button @click="addItem">Add Item</button>
    </div>
    <div>
      <tr v-for="(item, index) in todoList" :key="index">
        <td>
          <button @click="removeItem(index)">X</button>
        </td>
        <td>{{ item.value }}</td>
      </tr>
    <div>
  </div>
</template>

<script>
export default {
  name: ‘SampleComponent’,
  computed: {
    todoList() {
      return this.$store.getters.todoList
    }
  },
  data() {
    return {
      todoInput: ‘’
    }
  },
  methods: {
    addItem() {
      this.$store.dispatch('addItem', this.todoInput)
    },
    removeItem(index) {
      this.$store.dispatch(‘removeItem’, index)
    }
  }
}
</script>

<style scoped>
</style>

How to setup store into modules

src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const moduleA = {
  state: () => ({
    todoList: [
      { value: ‘Code’ }
    ]
  }),
  getters: {
    todoList: state => {
      return state.todoList
    }
  },
  mutations: {
    addTodoItem(state, value) {
      state.todoList.push({value: value})
    },
    removeTodoItem(state, value) {
      state.todoList.splice(value, 1)
    }
  },
  actions: {
    addItem (context, item) {
      context.commit('addTodoItem', item)
    },
    removeItem(context, itemIndex) {
      context.commit('removeTodoItem', itemIndex)
    }
  }
}

const store = new Vuex.Store({
  modules: {
    moduleA: moduleA
  } 
})

export default store

SampleComponent.vue

<template>
  <div>
    <div>
      <span>Add Item: </span>
      <input v-model="todoInput" />
      <button @click="addItem">Add Item</button>
    </div>
    <div>
      <tr v-for="(item, index) in todoList" :key="index">
        <td>
          <button @click="removeItem(index)">X</button>
        </td>
        <td>{{ item.value }}</td>
      </tr>
    <div>
  </div>
</template>

<script>
export default {
  name: ‘SampleComponent’,
  computed: {
    todoList() {
      return this.$store.getters.todoList
    }
  },
  data() {
    return {
      todoInput: ‘’
    }
  },
  methods: {
    addItem() {
      this.$store.dispatch('addItem', this.todoInput)
    },
    removeItem(index) {
      this.$store.dispatch(‘removeItem’, index)
    }
  }
}
</script>

<style scoped>
</style>

Vue Router

What it is:
a routing mechanism for switching components
used in building Single Page Applications
useful for changing components using URL paths

Reference: https://router.vuejs.org/guide/#html

How to Setup Vue Router in a Project

src/routes/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import HelloWorld from './../components/HelloWorld.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/', 
    component: HelloWorld,
  },
]

const router = new VueRouter({
  routes
})

export default router

src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './routes/index.js'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

src/App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <div>
      <router-link :to="{ path: '/'}">Home</router-link>
    </div>
    <router-view />
  </div>
</template>

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

<style scoped>
</style>

How to add routes

src/routes/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import HelloWorld from './../components/HelloWorld.vue'
import TodoComponent from './../components/TodoComponent.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/', 
    component: HelloWorld,
  },
  {
    path: '/todolist', 
    component: TodoComponent
  },
]

const router = new VueRouter({
  routes
})

export default router

src/components/TodoComponent.vue

<template>
  <div>
    Todo Component
  </div>
</template>

<script>
export default {
    name: 'TodoComponent'
}
</script>

<style scoped>
</style>

src/App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <div>
      <router-link :to="{ path: '/'}">Home</router-link>
      <router-link 
        :to="{ path: '/todolist'}"
      >
        TodoComponent
      </router-link>
    </div>
    <router-view />
  </div>
</template>

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

<style scoped>
</style>

Dynamic Routes

What it is:
useful for components which depends on certain parameters before rendering
allows passing values in between routes

How to add dynamic routes

To see it in action, type the following URL:
http://localhost:8080/#/person/1

src/routes/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import HelloWorld from './../components/HelloWorld.vue'
import TodoComponent from './../components/TodoComponent.vue'
import PersonComponent from './../components/PersonComponent.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/', 
    component: HelloWorld,
  },
  {
    path: '/todolist', 
    component: TodoComponent
  },
  {
    path: ‘/person/:id’,
    component: PersonComponent
  }
]

const router = new VueRouter({
  routes
})

export default router

src/components/PersonComponent.vue

<template>
  <div>
    Person Component
    {{ $route.params.id }}
  </div>
</template>

<script>
export default {
    name: 'PersonComponent'
}
</script>

<style scoped>
</style>

Programmatic Navigation

When to use:
route needs to be navigated using function
route requires dynamic parameters
route needs to be navigated after a certain process occurs

**Reference: **https://router.vuejs.org/guide/essentials/navigation.html

How to programmatically navigate a route

ProgrammaticRouting.vue

<template>
  <div>
    <button @click=”navigate”>Navigate to somewhere</button>
  </div>
</template>

<script>
export default {
  name: 'ProgrammaticRouting',
  methods: {
    navigate() {
      // The path must be the same as the path declared in routes
      this.$router.push({path: ‘somewhere’})
    }
  }
}
</script>

<style scoped>
</style>