Vue Literal Compiler

templates
components
single-file-comps

#1

Introducing Vue Literal Compiler.

Find on Github https://github.com/michaelolof/vue-literal-compiler
Find on NPM https://www.npmjs.com/package/vue-literal-compiler

Vue Literal Compiler is a drop in replacement for the default vue-template-compiler.
It gives you the ability of converting template literals into render functions at compile time thus making your apps more performant.

Motivations

  • Maintain the SFC paradigm. Write all your Templates, Styles and Scripts in one file (JavaScript/TypeScript)
  • Compiles your literal templates into render functions at compile time rather than at runtime.
  • Provide Support for CSS in JavaScript/TypeScript.
  • Provide Support for Scoped CSS
  • Provide support for SASS, SCSS, LESS etc. using the lang attribute.
  • Provide Support for Custom Blocks in JavaScript/TypeScript.
  • Provide Support for lintable typesafe templates using Fat Arrow Templates

Example

Read more about it on my Medium post


#2

This looks very interesting.will have a closer look asap!

Edit: that medium link doesn’t work for me. Looking for your name on medium also turns up empty except for a mention in one comment, weird


#3

Good Evening.

I’m just noticing this myself. It seems my account has been suspended for whatever reasons. I’m sort of new to this thing.

I got no explanations, no warnings nothing infact If you hadn’t told me, I wouldn’t have known
I took out time to write that article but I guess I can’t share it.

Luckily there is npm and github.
Thank you for your interest.


#4

That’s a bummer. Medium seems less and less like a platform to rely on.

Maybe put it into the repo’s wiki or something, to make it accessible for the moment?


#5

Hey there. Thank you for your kind interest

So I reached out to medium to know why my account was suspended and they replied

Turns out there was an overzealous spam filter.

Anyways its up now.
Again thank you for your interest


#6

Hi, I have looked at your package but couldn’t really work out what is the purpose of this? What problems does it solve and what benefits does it bring?
Thanks


#7

Hello, @michaelolof, thx for sharing your project!
Few questions:

  1. Props type checking for children components in template is not supported?
  2. Annotate template with comment @VueLiteralCompiler Template - it’s the only way at the moment?

#9

Hello @safrav.

So it was a personal problem of mine that I decided to solve. I had existing code base in .vue files but Vetur was just to slow and laggy for on my system. I had to turn off intellisense and linting on Vetur just to get a tangible experience especially with TypeScript.

VSCode already ships with an amazing typescript engine. My first goal was to leverage that. Write components in pure .ts files and leverage the full typescript support that comes with VSCode.

Asides that Vue Literal Compiler solves 2 main problems

  1. Compiles your templates to render functions at build time rather than at runtime. This is the optimization you get out of the box when you use .vue file templates. Pure string literal templates don’t get this optimization. This is why you have to include a different version of vue which has a runtime compiler when using string literal templates. This comes at a performance cost.

  2. Maintain the Single File Component paradigm. This is something you only get while using .vue files. Basically with aid of JSDoc comments Vue Literal Compiler can treat your plain .ts or .js files just like regular .vue files.

Other add ons like the Fat Arrow Templates are just additional advantages of maintaining a code base of pure .ts or .js files.

Feel free to ask any other questions / clarifications you might need.


#10

@co1nd01r

I’m not sure I get your first question. Can you please clarify.

About your second question. I guess you’re referring to Fat Arrow Templates previously called Functional Templates It was never removed. It has always been there. It was just merged with the initial normal template.

Basically templates can be used in 2 modes.

  1. As a string variable.
  2. As a function that takes one parameter and returns a string.

The later is what I feel you’re referring to. To use them just convert it into a fat arrow function that returns a string.