Paul Hammant's Blog: Buildless SFC VueJS Applications
Vue.JS has a super-cool “Single File Components” (SFC) capability. These are files that contain a component’s HTML, JS and CSS. Usually a visual component, as invisible things would notmally be left to library functions if sharing was needed. Normally this is less than relevant to the ultimate deployable application as WebPack (etc) would munge the larger application into the smallest size/count amount of JavaScript that would be injectable into a page using ‘script’ tags. That the components were once .vue files (single file components; SFCs) is lost in that situation.
I made a demo this on a micro-site: https://github.com/paul-hammant/VueSfcDemo .
Using the work of others
Two people made this a quick effort to complete:
- Franck Freiburger’s library that allows use of .vue files in browser deployments: vue3-sfc-loader.
- Nana Kwame Owusu’s Calculator SFC demo: https://github.com/sowusu/VueCalculator. This is the app we’re showcasing.
Frank has been working on this .vue loader technology for four years, so it is quite mature now, even if he did make a new repo for the jump to Vue 3.x.
I’ll update this blog entry later when Frank has overcome a bug: vue3-sfc-loader/issues/19
Thoughts
Would I use this in production settings rather than a proof of concept?
- Yes, for intranet solutions.
- Yes, for apps on the web for enrolled clients
- Probably not for webscale needs. It would be nice for some post-processing webpack-alike to take a tested vue3-sfc-loader and do the usual minification++ tricks.
What the Vue community needs
- A ‘component marketplace’ that is all about SFC components.
The .NET community gets this right:
- WinForms: https://marketplace.visualstudio.com/search?term=winforms&target=VS
- ASP.NET MVC: https://marketplace.visualstudio.com/search?term=MVC&target=VS
- WPF: https://marketplace.visualstudio.com/search?term=wpf&target=VS
This comment would be true of all other UI widget/component technologies too, fat and thin: QML, Swing, Angular, Flutter. NPM and similar isn’t enough: the component marketplace needs to have inline examples of use, or pics where that’s not possible.