Vuejs

Vue.js

We are using the JavaScript framework Vue.js in this class. Why do we use a JavaScript framework? JavaScript frameworks help us structuring our code into components and provide ways for creating templates for our data. They manage the DOM and try to be more efficient by using a virtual DOM. They also provide tools for common problems in single-page-applications, such as routing. You don't need to use a JavaScript framework for every website you build, but for more complex websites and applications, they can be helpful. Why are we using Vue.js and not [insert your favourite framework here]? Vue.js has the reputation that is it easier to learn than React or Angular. We have also made the experience that design students can handle it well because the code looks familiar (HTML and CSS). It is also, next to Angular and React, commonly used in Switzerland judging from job descriptions for frontend or fullstack positions. Most employers don't ask for experience with a specific framework, but will accept any of the big three.

Your tasks

Vue.js Introduction

• Work through the official introduction to Vue.js.

Vue.js Installation

• Install Git.
• Install Node.js.
• Install the Vue CLI
• Use Vue CLI to create a project. A recommend using the GUI. Choose the boilerplate option.
• Open the project in an IDE. I recommend Visual Studio Code
• Open a terminal and run npm run serve to start a server
• Look at the project in browser

Get to know Vue.js

• Create a component for showing a single commute. To make things simpler, you can start without Contentful and just show a String for the person, start and destination.
• Add the component to the Home view and delete the HelloWorld component.
• Use props to set person, start and destination from the Home view.
• Use data properties on the Home view to pass person, start, and destination to the Commute component. Hardcode some sample data into the Home view.
• Create at least two different commutes and display them. Here's how to render lists.
• Push your project to Github.
• You can find a sample solution here here.

Integrate Contentful

• Install contentful in your project npm install -s contentful.
• Create a module for Contentful where you create and export a contentful client.
• Import the client into your Home view.
• In your Home view, create a lifecycle hook for ready and get the data from Contentful to replace the harcoded data.
• Update your Commute component to work with the data from Contentful.
• Also display the photos.
• You can find a sample solution here here.

Environment Variable (optional)

If you don't want to publish your API keys on Github, you can look into using environemnt variables

• Environment variables in Vue
• Environment variables in Netlify
• Keeping API Keys save

Adding SASS

If your team wants to work with SASS, you can install it with npm install -D sass-loader sass

Read more about it here: https://cli.vuejs.org/guide/css.html#pre-processors