So, over the next couple of weeks, I've set myself the fun task of redoing this website https://paulmackey.ie/ in VueJS. I'm doing this with the aim of getting really familiar with using Vue CLI, VueJS, Vuex, Vue Router etc & just broadening my experience & knowledge in the area of JS Frameworks.. I'm using Netlify to deploy this site so once I'm happy, I'll update Netlify to deploy the new VueJS repo..
TODO List
- Full Stack Vue App with Node JS & Express Backend with possibly Mongo DB also known as a MEVN stack (because why not!?)
- Demo Web Service calls from FE to BE using Axios ( Dive into Axios a bit more )
- Possibly redo FE framework from Bootstap to Bulma
--
Update 12th May 2020
- Used the Vue CLI -> https://cli.vuejs.org/ which enabled me to quickly scaffold a new project via Vue Create
- Followed the guidelines on https://router.vuejs.org/ to install Vue Router to map Vue components to routes - same concept as react-router.
- Successfully created the main hero component on the home page - large image with router / nav links
- Successfully created the Blog Home component which connects to ButterCMS which is my Headless CMS of choice that I use to write my blog posts on - really useful tutorial here on integrating ButterCMS with VueJS provided by ButterCMS - they provide integration information on a whole wide range of frameworks!
- Successfully created a single Blog Page which queries ButterCMS by the URL Slug
So far I'm thoroughly enjoying figuring out this framework and how the various bits and pieces fit together - My favourite so far is dropping Reacts JSX for Vue's Templates - much more straight forward and easier to work with in my opinion & also the ability to scope SCSS/Less etc to components & also the various v- directives within the framework such as here -> https://vuejs.org/v2/guide/syntax.html#Directives . In particular i'm using v-for to render my blog posts list. More on this to come.
--
Update 13th May 2020
- Finished building all the various components / views which include projects, posts, about page, forms etc..
- Added vue-burger-menu
- Noticed that it's probably easier in Reacts render functions to handle complexity as it is trying to manage complexity using Vue's directives in templates.. Although.. Vue does allow you to go under the hood with render functions -https://vuejs.org/v2/guide/render-function.html
- VueJS, similar to ReactJS, has a library of cool components that you can quickly embed into your project. I'm using vue-burger-menu - Check out the list https://github.com/vuejs/awesome-vue#components--libraries
- In doing extensive research into Vuex - https://vuex.vuejs.org/ - I'm trying to come up with a way of incorporating state management into the App. Ultimately, this site is relatively small scale with a straight forward purpose, so i might incorporate a virtual shopping store or something along those lines on to one of the pages with the aim of getting familiar with state management in a Vue - sometimes it's easier to learn by doing than reading a wall of text!
--
Update 6th Aug 2020
- Site launched in VueJS
- TODO: Cleanup & smoother transition / loading icon between page change