/VueJs-Workshop-1

Primary LanguageJavaScript

Vue-beer

Build your first VueJs App!

VueJs

VueJs Basic Example

Result

result

The final result is composed of a paginated list of beers fetched with an HTTP request with a filter input, and a selected beer details area.

Install project sources

1. With Npm and node

If you already have node and npm installed, open a terminal in one of the "step" folder then type:

npm install && npm run dev

or with yarn

yarn install && yarn run dev

2. With Docker

If you don't have node and npm or you don't want to update your local node version, use docker:

# Create your docker image based on your local source code
$ docker build -t coconut .
[...]

# run a container based on the coconut docker image
$ docker run -d --restart always -p 8080:8080 coconut
8f3fe2e82a739033f2e5c67a7774b930c73f436e906d5a74c8417568f15d1072

# test it
$ curl http://localhost:8080

# stop the container
# get the id return by the docker run command
$ docker stop 8f3fe2e82a739033f2e5c67a7774b930c73f436e906d5a74c8417568f15d1072

Step 1: HTTP Request and list rendering

Specs:

  • HTTP Request to https://api.punkapi.com/v2/beers (GET) in the home component
  • Create a BeerList component that render a list of beers with the data from "home" component

Hints:

Step 2: Details panel and passing data between components

Specs:

  • Create a BeerDetails component with the selected beer infos
  • Add a "selected" state on the selected beer in "BeerList" component

Hints:

Step 3: Filter by name and beer list paginate

Specs:

  • add a filter input above the beer list in BeerList component
  • add paginate buttons under the beer list in BeerList component

Hints:

  • Computed properties

Bonus: Vuex

  • Using vuex to store and access the data instead of using dynamic properties

Resources