Vue JS projects

1: Threads Application View Github Code

Tools used in the app.

used Vue JS for building front end components

Vue router to route static pages with dynamics routes

styling components dynamically to enhance SEO on a SPA

Implementing Vuex and State Management for fetching authenticated users and building a user profile and authID to create new posts from a user

Higher order functions in Vue like dynamic vuex getters and mutations

worked with cloud firestore for storing and retrieving data

user authentication

loaders

Navigation guards on Vue Router

custom directives

implementing vuex store

pagination and notification system

form validation

and deployment



What is the app about

This is a thread application that utilizes json data from a rest API. It queries the data object properties and renders the data into Vue JS components dynamically. Display data list as threads coming from the data JSON. And applying styles to the vue components.



Adding router tothe application

On clicking a particularthread,it routes one to that thread with a unique id and displays allposts available onthe thread. This improves SPA as no reloading occurs from the page (static page)

  • The routes are matched matched dynamically with routs paramas

  • extracting route configurations

  • mapping routes with specific components

  • pageNotFound fromVue router with redirect

  • redirect without url change