👀 Check it out! hosted on Netlify 🔗
- 🥽 VueJS 3
I used this project to demo a basic VueJS project. It uses the Options API as it's the one I'm used to, having coded with VueJS 2 for some time.
It also uses components
, Vue Router 4
, and Pinia
.
A feature I liked implementing is the filter tool.
🔍 See code excerpt
computed: {
filteredArray() {
let filtered = this.db
if (this.filtering) {
filtered = filtered.filter(e => e.availability == 'In stock')
}
if (this.query != '') {
filtered = filtered.filter(e => e.name.toUpperCase().includes(this.query.toUpperCase()) || e.category.toUpperCase().includes(this.query.toUpperCase()))
}
if (this.currentCategory != '' && this.currentCategory != 'Select a category') {
filtered = filtered.filter(e => e.category == this.currentCategory)
}
return filtered
},
}
- 🖼 Axios and the Pexels API
The data you see in assets/data.js
has been generated by ChatGPT. I wanted pictures on my web application, and I wanted to demo querying APIs so I used the Pexels API in a very simple way, using the name of the product.
🔍 See code excerpt
client.photos.search({ query: this.name, per_page: 1 }).then(photos => {
this.imgUrl = photos.photos[0].src.medium
})
- 👩🎨 Bulma (CSS framework), SCSS (in my views and components), and media-queries for a basic responsive design.
yarn install
yarn serve
yarn build
yarn lint