Skip to content

Demo of FranckFreiburger/vue3-sfc-loader for a Calculator SFC demo app

License

Notifications You must be signed in to change notification settings

paul-hammant/VueSfcDemo

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

VueSfcDemo

Demo of FranckFreiburger/vue3-sfc-loader (WIP) For a Calculator SFC demo app

Live Demo: https://paul-hammant.github.io/VueSfcDemo

Technologies reused:

Features of this repo/demo

  • Buildless
    • no NPM, etc
    • site/app just runs (over http:// and https:// not file://)
  • Decomposed solution (Nanas's work, not mine)

Changes to get this working with document.getElementById

See the diff: a0aa20e (note Blinker was moved, but Git thinks Added/Deleted - a feature not a bug)

  • velocity-animate referenced in-situ on unpkg rather than from node_modules/

Other changes I made

  • Changed from a document.getElementById() DOM traversl to a canonicl Vue way (refs)
  • Component directory reorg: Button feels reusable outside aCalculator so it's loaded as ../Button.vue now
  • Moved velocity-animate logic into the Blinker component from the Display component

TODO

  • More refactoring. Maybe make Display take some behaviors from Calculator
  • Work out how to parameterize velocity-animate version (1.5.2) that's currently hard coded in two places
  • Add Tests
  • Work out if there's a one-liner way of injecting a Vue SFC component into a page

See also: https://paulhammant.com/2021/02/16/buildless-sfc-vuejs-applications

About

Demo of FranckFreiburger/vue3-sfc-loader for a Calculator SFC demo app

Topics

Resources

License

Stars

Watchers

Forks

Languages

  • Vue 90.0%
  • HTML 10.0%