Google Photos album viewer built with Vue.js
google-photos-vue
Google Photos album viewer built with Vue.js.
Features
Formats
Photo
Conventional grid.
Text
Justified layout highlighting the "quoted" word (i.e. theme) in each photo description.
Contexts
Authenticated
The default state initializes gapi
. Once authenticated, the
user can select one of their albums, and its full contents is loaded.
Unauthenticated
Vuex application state JSON is exposed in the authenticated context. The state is modified
with relative base URLs that are compatible with the naming conventions of page assets when saved via Google Chrome.
When downloaded, served, and configured, i.e.
<div id="app" data-external-state-path="365-2019-state.json"></div>
the Vue.js application functions in an unauthenticated context, initialized with this static state.
A working example of this context can be seen in the
gh-pages-src
branch, which is built and served
via GitHub Pages.
Analytics
Media clicks are instrumented with Google Analytics Events
when configured.
Usage
-
Setup Google OAuth 2.0 and include your Client ID in
main.ts
. -
Optionally setup Google Analytics and include your ID in
main.ts
. -
Build the application via:
npm run serve
or other Vue CLI commands.