Built with Vue.js and Vuex. Responsive UI that adapts to all screen sizes. Click the cog icon to access the settings panel. All changes are auto-saved to local storage - so the user can reload the page or even restart their browser and keep their settings... without requiring a sign-up process. Neat!
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
components
layouts
middleware
pages
plugins
static
store
.editorconfig
.eslintrc.js
.gitignore
README.md
nuxt.config.js
package-lock.json
package.json

README.md

Dashboard

A simple dashboard app with settings panel. Built on Vue.js, Vuex & Nuxt.

Guide:

This simple web app demonstrates some straight-forward state management in Vue. The settings panel allows the user to change the timezone, colors and sizes of the clock elements. The color selector is a custom built Hue/Saturation/Lightness set of sliders. The timezone selector includes an autocomplete feature that translates between the timezone format "Continent/City_Name" and a more friendly, readable format "City Name, Country".

The Repo:

This is a standard Nuxt project.

  • Main page is at /pages/index.vue
  • Anything else of interest is located in /components

Build Setup

# install dependencies
$ npm install

# serve with hot reload at localhost:3000
$ npm run dev

# build for GitHub pages
$ npm run build:gh-pages
$ npm run deploy