rubengees / vue-workshop

:closed_book: Vue.js presentation and workshop

Vue Workshop

German presentation and workshop around Vue.js.
Direct link to the presentation here.

The presentation covers the basic concepts, compares it to other frameworks and shows the usage.
The frontend and backend folders contain a simple note list project to implement.

Prerequisites

• Java 1.8 JDK or higher
• Node.js 8 or higher
• Yarn (Not required but recommended)
• JavaScript IDE, e.g. Visual Studio Code

Backend

The backend directory contains a ready to use REST-API implementation for working with notes.

The following APIs are available:

Method	endpoint	description
GET	/api/notes	Returns all available notes as an array.
GET	/api/notes/{id}	Returns a specific note based on the id.
POST	/api/notes	Creates a new note.
PUT	/api/notes/{id}	Updates a specific note based on the id.
DELETE	/api/notes/{id}	Deletes a specific note based on the id.

A note is structured like this:

{
  "content": "the content",
  "isDone": true
}

You can start the server with ./gradlew bootRun -Dserver.port=8000.
Of course, you can choose any port you like, apart from 8080, which will be used by the frontend.

Frontend

The frontend directory contains a vue skeletton with some predefined code, which should help getting started.
You will mainly work in the App.vue file. See the presentation and the comments in that file.

After installing the dependencies with running yarn, the server can be started with yarn start and is then accessible on http://localhost:8080.
It also runs lint on every code change, so be sure to have a look at that window once in a while.

The frontend-solution directory contains a possible solution to compare yours to.