hi, i'm hannes

  • working with Vue.js for 1.5 years
  • currently in a team working on a product

Vuetify

the product

  • backoffice webapp

  • not for endusers

  • to support clients managaing products/customers

    • by providing interface

    • special actions for daily tasks

design requirements: none

  • no client CI or design

  • change colors/logo

  • UX first

  • use components framework

    • i.e. bootstrap, buefy (bulma + vue), ...

    • decision: vuetify

https://buefy.github.io

https://bootstrap-vue.js.org

        material design

what is material design?

... is a design system – backed by open-source code – that helps teams build digital experiences

it's from google

guidelines

in the real world

but...

By using it, you of course get a decent design that works technically quite well. But you don’t get a personal experience that lasts or even targets people on a personal level.

https://wdrl.info/archive/249

     vuetify

what is vuetify?

... is a semantic component framework for Vue. It aims to provide clean, semantic and reusable components that make building your application a breeze

https://github.com/vuetifyjs/vuetify#introduction

history

https://material.io/archive/guidelines/material-design/whats-new.html#whats-new-previous-updates

2015

2019

2016

2017

2018

v1

v2

80+ components

https://vuetifyjs.com/en/getting-started/quick-start

morrr components

https://vuetifyjs.com/en/getting-started/quick-start

grid

https://vuetifyjs.com/en/getting-started/quick-start

go through docs and show things

stats

  • vuetify was started in 2016 by John Leider @zeroskillz
  • after serveral alpha/betas by now has reached version 1.3.9
  • is quite popular AKA look at all ze stats!!!

https://github.com/vuetifyjs/vuetify

people stats

  • 186 patrons on patreon
  • 8 paying 100-500 usd per month
  • 3 core devs (excluding John)

https://github.com/vuetifyjs/vuetify/blob/dev/BACKERS.md

the good

  • looks good without writing any css
    • so js only devs can use it :P
  • basic default functionalities are build in
    • i.e. pagination, sorting, dialogs, ...
  • awesome documentation
    • great structure
    • code examples

the bad

  • modify more than just the theme/colors
    (it might get tricky and may break updating)
  • some popular components still missing
    (i.e. btn group, upload)

the future (2.0)

new components, i.e.

  • Sparkline charts
  • File upload
  • Overlay
  • Gallery
  • Calendar

https://slides.com/johnjleider/vuetify-2

morrrrr future (2.0)

  • full RTL support
  • treeshaking
  • weekly patches
  • reduce component fragmentation
  • typescript
  • stylus -> SCSS
  • vuex modules for notifications

https://slides.com/johnjleider/vuetify-2

Questions?

ressources

  • https://vuetifyjs.com/en
  • https://github.com/vuetifyjs/vuetify
  • https://slides.com/johnjleider/vuetify-2

Vuetify

By hannes

Vuetify

A short introduction to Vuetify

  • 385
Loading comments...

More from hannes