VueCK

VueJS component compiler middleware for Rack

Introduction

VueCK makes it easy to integrate VueJS single file components into Rack applications. VueCK offers the following features:

  • Compiles all of your project's components into sinlge Javascript and CSS files
  • Minifies CSS and HTML
  • (Probably) supports any flavor of HTML, Javscript, or CSS that Tilt supports, including Slim, Sass, Less, ERB, etc
  • Caches compiled components for faster requests
  • No server-side Javascript infrastructure required! ## Usage VueCK is easy to use.

Install the gem:

$ gem install vueck

or include it in your Gemfile

gem 'vueck'

and then install

$ bundler install

Add VueCK to your config.ru

require 'vueck'
use VueCK::Plugin

Create a directory in the root of your project called vue and place your SFC files (with a .vue extension) in that directory. Finally, add the vue.js and vue.css requests into your layout:

script type="text/javascript" src="/vue.js"
link rel="stylesheet" type='text/css' href="/vue.css"

That's it!

Rationale

VueJS is amazing and Vue single file components (SFCs) increase productivity, make your code easier to mantain, and are generally awesome. However, using SFCs traditionally means bringing some server side Javascript into your environment. This can be both a hassle and a bit silly if you've already got a robust Ruby stack working for you. VueCK lets you take advantage of SFCs without any Javascript dependencies.

Format

VueCK isn't 100% compatible with official VueJS SFCs. It's a from-the-ground-up reimplementation of the SFC compiler and thus has some differences. These are minor however and you can probably get any SFC you can find working in VueCK just by adding one or two attributes. Here's what you need to know:

  • VueCK SFCs are enclosed in a parent <component/> element
  • The <component/> element needs to have a name attribute. This is the name that will be used for the Javascript object for your component.
  • Styles in VueCK are not scoped. Vue's official compiler achieves the illusion of scoped styles by appending random charecters to class names. ## Notes
  • VueCK should support any templating or preprocessing tools Tilt does; that said, I only care about Slim and Sass, so I can't be 100% sure. If anyone is interested in ensuring compatibility with others I would welcome the contribution!