A photo gallery app using Vue.js + Vue Router + Vuex

Overview

Vue Photogram App

A photo gallery app using Vue.js + Vue Router + Vuex

enter image description here

Features:

  • Using Pixabay Api
  • Home, category, tag and single photo page
  • Infinite scroll
  • Masonry layout
  • Filter by image type, orientation, color and safe search
  • Search image
  • List albums
  • Dark, light and auto mode switch
  • Responsive design

Technologies and tools:

  • Vue.js
  • VueX, Vue Router
  • Masonry Layout Wall
  • Pure SASS and SCSS
  • Responsive design

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

License:

MIT License

Copyright (c) 2022 Emre Güney

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

You might also like...
Source code for TSUYOSHI OCHIAI PHOTOGRAPHY (https://occhi.jp/photo)

tsuyoshi-ochiai-photography Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production np

V-img is a plugin for Vue.js that allows you to show images in full-screen gallery
V-img is a plugin for Vue.js that allows you to show images in full-screen gallery

V-img is a plugin for Vue.js that allows you to show images in full-screen gallery

Lightweight and simple image gallery component for Vue.js
Lightweight and simple image gallery component for Vue.js

vue-image-box Description Lightweight and simple-ish image gallery component for Vue.js. Images can also be cycled through using the left & right arro

Lingallery is a simple image gallery component for Vue.js
Lingallery is a simple image gallery component for Vue.js

Lingallery is a simple image gallery component for Vue.js. It displays a large image with thumbnails below as you can see in the demo. You can define several settings to adapt the gallery to your needs.

A simple gallery library for vue, and for you to fuck!
A simple gallery library for vue, and for you to fuck!

A simple gallery library for vue, and for you to fuck!

A lightweight image, video and iframe lightbox gallery component for Vue
A lightweight image, video and iframe lightbox gallery component for Vue

A lightweight image, video and iframe lightbox gallery component for Vue. Supports slide, zoom, rotation, autoplay, captions and so on.

A gallery plugin for vue2

A gallery plugin for vue2

A gallery library for vuejs with a modern design and automatic image optimisation
A gallery library for vuejs with a modern design and automatic image optimisation

Nuxt Gallery A gallery library for nuxt with a modern design and automatic image optimisation. How it works: On compile time the images of the gallery

Millicast viewer plugin for Vue framework. It uses Vuex store for the plugin state management.

Millicast Vue.js Web Viewer Plugin Vue.js plugin to embed viewer of a Millicast stream. This plugin allows developers to simplify Millicast services i

Owner
Emre Güney
A self-taught passionate Fullstack Developer. In love with Javascript 😍 and a fan of Java 🤓.
Emre Güney
A sample photo search app using Vuejs and unsplash Api

vue-unsplash Vue Unsplash is photo search webapp made using Vue.js which uses Unsplash JSON APIs for photo search. Unsplash https://unsplash.com the m

Junip 27 Jul 11, 2022
A Photo Search Application Which Using Unsplash API

photo-search A photo search application which using unsplash api Project setup B

Danial Selmipoor 8 Dec 23, 2022
Twitter Gallery (based on Vue.js) is using Twitter Official API to fetch media

Twitter Gallery Twitter Gallery (based on Vue.js) is using Twitter Official API

Sajjad Ali 2 Jul 17, 2022
vue-dark-photo 一款基于el-dialog封装的轻便简易的图片预览组件,支持放大、缩小、下载、打印等功能。

先上效果图 vue-dark-photo 基于 element-ui2.x 开发的预览图片组件 支持 放大、缩小、复原、下载、打印等功能 支持在线预览pdf、word等文档 暂时只支持jpg、png格式的图片 继承 el-dialog 等组件的属性事件等 适合使用了element-ui的项目 Git

iDark 161 Dec 22, 2022
Lightbox Photo Grid and Slideshow compoment for Vue.JS

Lightbox Photo Grid and Slideshow component for Vue.JS v-lightbox is a Vue component which allows to display first x (1-5) images of your gallery in a

Morioh Lab 78 Nov 27, 2022
Multiple photo galleries built with vue.js 2

In order for the gallery to work the only file you need to edit is vue-photo-gallery.js. You can have as many or as little galleries as you want. Just

Dani Gamss 9 Apr 9, 2018
An Online Photo Album Project With Vue.js

PROJETO ALBUM DE FOTOS ONLINE ?? Tecnologias | ?? Projeto | ?? Layout ?? TECNOLOGIAS - HTML5 - CSS3 - BOOTSTRAP - JAVA SCRIPT - VUE.JS - AXIOS - Utili

Diego Mauricio da Cruz 2 Dec 10, 2021
A React-Photo-Collage But For Vue.js

React Photo Collage Installation npm install react-photo-collage Props Name Type Required Default Description width string false 800px height an arra

Benny Hsieh 23 Dec 28, 2022
Timeline - A photo organizer similar to how Google Photos or Amazon Photos does.

Timeline is a web application which aims to organize photos similar to how Google Photos or Amazon Photos does.

null 41 Dec 20, 2022
PisaAI is a photo repair and retouching tool, that uses AI algorithms to automatically colorize black& white photos, repair old photos, and optimize blurred out-of-focus photos.

PisaAI(披萨智能)在线图片优化 Project setup yarn install Compiles and hot-reloads for development yarn serve Compiles and minifies for production yarn build L

Mark HOU 10 Sep 21, 2022