Skip to content

Design of vue lj casa 2

See also: vue-canvas-learning-journal

Choice of UI Framework#

Choice seemed to be between

Currently trying Quasar as more cross platform.

  1. Integrate Quasar component into current test failed
  2. Integrate Vuetify component into current test failed

Integrate Quasar with user script#

Trying the Vite plugin for Quasar as first experiment

Problems getting this going, but then discover my GreaseMonkey dev environment uses Ant Design Vue

Couldn't get it to compile quickly

Integrate Vuetify#

  • Early build working

    TO do 

    - [ ] [install icons](https://vuetifyjs.com/en/features/icon-fonts/#usage)

    Problem with the icons is that some of the pre-defined Canvas classes override the `v-icon` classes which vuetify relies upon. An early solution was to manually insert icons, but that doesn't work when we're moving to dynamic components (e.g. changing icons based on the state of an expansion panel)

    It appears the problem is something to do with the size of the icon.  i.e. removing the `v-icon--size-default` css class 
- [ ] [consider vite plugin](https://www.npmjs.com/package/vite-plugin-vuetify)
    • Add a Vuetify component
    • Add the expansion

UI Approach#

  1. Using Quasar components
  2. icons - appears that the quasar-extras-svg-icons offer a way to work with Quasar