https://github.com/astagi/tdd-with-vue
✌🏻TDD example with Vue - Image placeholder component fetching images from LoremPicker.
https://github.com/astagi/tdd-with-vue
placeholder tdd tutorial vue
Last synced: 4 months ago
JSON representation
✌🏻TDD example with Vue - Image placeholder component fetching images from LoremPicker.
- Host: GitHub
- URL: https://github.com/astagi/tdd-with-vue
- Owner: astagi
- License: mit
- Created: 2020-03-03T15:13:27.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-12T03:37:23.000Z (almost 3 years ago)
- Last Synced: 2025-02-12T19:48:56.847Z (8 months ago)
- Topics: placeholder, tdd, tutorial, vue
- Language: TypeScript
- Homepage:
- Size: 4.64 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Build Vue Image Placeholder using TDD
[](https://travis-ci.org/astagi/tdd-with-vue) [](https://codecov.io/gh/astagi/tdd-with-vue)
This is the source code for [Writing your first Vue component using TDD](https://dev.to/astagi/writing-a-vue-component-using-tdd-a-gentle-introduction-4n2d). In this tutorial we'll learn the basic concepts of Test Driven Development (TDD) building a simple, reusable Vue component with Typescript called `ImagePlaceholder` to fetch images from [LoremFlickr](https://loremflickr.com/), a simple images service to get random images specifying parameters like width, height, filters, categories.. inside a url.
For example to get an image `320x240` from `Brazil` or `Rio` you can fetch [https://loremflickr.com/320/240/brazil,rio](https://loremflickr.com/320/240/brazil,rio)
There are a lot of options in LoremFlickr, in this tutorial we'll focus on developing a simple component to get an image from LoremFlickr with a specific `width` and `height` and filtering by `categories`.
## Use it in your app
```ts
import ImagePlaceholder from 'vue-image-placeholder';
``````html
```
Props `height` and `images` are optional.
## Project setup for development
```sh
yarn install
```### Compiles and minifies for production
```sh
yarn build
```### Run unit tests
```sh
yarn test:unit
```### Lints and fixes files
```sh
yarn lint
```