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:

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:

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.

Published

February 16th, 2021
Reads: