During this session, you will learn how to build components in Vue to avoid writing repetative code.

Session details #

This session takes place on the 7th of Nov 14:00 UTC.

• ☎️ Video call
• 📝 Minutes
• 🔴 Recording: Will be made available after the session.

Installations #

This week, you will use the Vue CLI to create a new Vue project. First, you will need to install the Vue CLI globally.

Installing something globally, means that you do not just install it inside a certain directory, for example your project folder, but make it available on your entire computer.

In the following steps, we assume you already have Yarn installed:

• Step 1: Install the Vue CLI globally using this command:
  yarn global add @vue/cli.
• Step 2: Navigate to the right folder in your terminal and run the following command to create a new project:
  vue create my-project.
• Step 3: To start a development server, run the following command inside your project directory:
  vue serve

Alternatively, you can use the graphical user interface to create a new project. Start the GUI with this command: vue ui

Group project #

For next week, prepare the following together with your fellow students:

• Turn all the guides that you created during previous sessions into a Vue project. Use Vue components to reuse pieces of code, such as a navigation bar.
• Add a way for users to bookmark articles and make a page that shows all bookmarked articles. For now, you will not be able to save their bookmarks when the user reloads the page. During the last session, we will explain how to save user data on a server.
• Share all of this in our GitHub repository.
• Prepare a short presentation to share your work at next week’s workshop.

We have not created a full example project for this week. However, we have added some instructions on how to easily set up a Vue project using the Vue CLI

Resources #

• Using the Vue CLI
• Single file components
• Data and methods in Vue
• Render lists in Vue
• How to handle events
• How to handle form input