Objectives

• Create a website for a fictional restaurant using VueJS and Vue Router

• The site will be responsive and able to be viewed on multiple devices

Tech Used

• Baslamiq

• Visual Studio Code

• Vue / Vue Router

• Bootstrap 4

• Netlify (Site deployment)

I’ve been taking time to learn Vue and wanted to try my hand at using Vue Router to create a small website. I decided to create a site for a fictional noodle restaurant named Esuna Noodles. I would use Vue to create the site with a focus on using components for each section, and Vue Router for the site navigation.

Sketching & Wireframing

I usually start out by sketching down ideas of how I want the site to look once completed. I already had a good idea of how I wanted the site to look before I started sketching, so this was more or less the time to get my ideas down on paper as quickly as possible.

Next, I create low-fidelity wireframes of my sketches using Balsamiq, creating the Desktop, Tablet, and Mobile (Phone) versions of the site. It’s around this time that I see what does and doesn’t work in my layouts and modify my designs as needed.

(Click the image to view the slideshow)

Creating The Site

After wireframing, I start coding in Visual Studio Code and load up Vue, Vue Router, and Bootstrap using NPM. As I work through each page, I see what does and does not work with the frameworks I’m using and adjust my styling and layout as needed. I started out by using the Bootstrap Cover Template provided by Bootstrap on their Examples page. After adding in the content from the wireframe to the homepage, I started to look for sources for images for the site.  

Since the images I used in Balsamiq were just for placement, I needed to source usable images for the live site. I was able to find two images on Unsplash to use for the background image and the noodle chef image. I added the noodle dish as the background image for the site, and a chef making noodles as the image for the About page.

The Menu page changed from the wireframe, where I had the content sectioned off into individual bordered squares with the text for specials outside of the squares. I decided to forego the borders and went with a more open design. It works well with the text option I decided on and lets the text flow easier in different responsive modes.

I had two version for the Contact page that I made when sketching and wireframing. I didn’t know which one would work out best of the site, so I decided to do a layout for both. I ended up going with the second version since the layout seemed to work best with the content I wanted to display.

Challenges & Conclusions

This was my first site using Vue Router, so the hardest part was getting the site routing set up correctly. This is my second Vue site that I’ve created using only my notes and what I’ve remembered from my online courses, so it was definitely a test to see how much I learned, figure out how to fix my mistakes when they did occur, and how to debug any other problem that would occur and come to a solution that would work out well for the site.

This was a great experience creating this site and I can’t wait to create more things using Vue.