JSFoo: round the year submissions

Submit talks on JavaScript and full stack engineering round the year

Demystifying dark art of SFC compilation

Submitted by Rahul Kadyan (@rahulkadyan) on Apr 24, 2018

Technical level: Advanced Status: Under evaluation


Vue single file components empower developers with the ability to write declarative render functions using plain HTML-like syntax. The so-called SFCs also provide features like collocation and scoped styles. We tend to use these SFCs effortlessly as any other JavaScript file but to reach that level of ease, Vue does the heavy lifting of transpilation. This talk takes a deep dive in the compilation process of Vue components and explains how to write a custom block processor. It also discovers some less known facts about SFCs.


The talk explores following steps in SFC compilation:

  • Template Parsing
  • Render Function CodeGen
  • Style Processing
  • Assemble Stage
  • Runtime Helpers

Speaker bio

I am open source enthusiast who happened to work for Myntra as a software developer. I contribute to vue ecosystem, and I am also a member of core team maintaining vue.



  • Zainab Bawa (@zainabbawa) Crew 2 years ago

    Rahul, you need to submit slides and preview video for the review team to evaluate the talk.

  • Rahul Kadyan (@rahulkadyan) Proposer 2 years ago

    I’ll do that in a week.

Login to leave a comment