Skip to content

paul-hammant/VueSfcDemo

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code
This branch is 1 commit ahead, 30 commits behind sowusu:master.

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 

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%