Jass::Vue::SFC – Vue SFC support for the Rails asset pipeline

Jass::Vue::SFC provides Vue Single File Component support for Sprockets and the Rails asset pipeline.

Vue SFCs will be compiled to ES modules, which can be imported using the new Rails Import Maps or regular <script module> tags.

Why?

Modern browsers support native loading of ES modules using the import statement. By leveraging the new Rails Import Maps, modular JS applications can be built without having to integrate a complex and tedious JS build pipeline.

However, framework-specific component formats like the Vue SFC format could not be used this way till now.

Jass::Vue::SFC enables the asset pipeline to compile .vue files to ES modules, allowing to build modular Vue applications in a clear and straightforward way, without the necessity of external build tools.

Installation

Gemfile

gem 'jass-vue-sfc'

JS dependencies

Add @vue/compiler-sfc to your JS dependencies:

$ yarn add @vue/compiler-sfc

Node.js

Jass::Vue::SFC depends on Nodo, which requires a working Node.js installation.

Usage

Place your .vue components inside your regular asset path, e.g. under app/assets/javascripts or app/javascript.

In app/javascript/components/HelloWorld.vue:

<script>
export default {
  data() {
    return {
      greeting: 'Hello World!'
    }
  }
}
</script>

<template>
  <p class="greeting">{{ greeting }}</p>
</template>

Then add the component to app/assets/config/manifest.js:

//= link app/javascript/components/HelloWorld.js

Make sure to link the file as .js instead of .vue. Sprockets will take care of converting it into an ES module.

In your HTML code, load the component as a module:

<%= javascript_include_tag 'HelloWorld.js', module: true %>

Components with imports

If you want to use module imports within your components, pin them in your Rails importmap:

# config/importmap.rb
pin 'vue'
pin 'HelloWorld.vue', to: 'HelloWorld.js'

Then just use them in your component:

<script>
import Vue from 'vue';
...
</script>

Limitations

Currently, the following things are not (yet) supported:

• extracting the <style> section of the SFC
• source maps