If your're using the classic Rails assets pipeline, this guide shows you how to add matestack to your Rails app.


Add 'matestack-ui-core' to your Gemfile

gem 'matestack-ui-core'

and run

$ bundle install


Require 'matestack-ui-core' in your assets/javascript/application.js

//= require matestack-ui-core


  • Remove turbolinks! Currently, matestack can't be used with turbolinks. This will be fixed soon
  • Additional Webpacker integration is coming soon

Matestack Folder

Create a folder called 'matestack' in your app directory. All your matestack apps, pages and components will be defined there.

Include Helper

Add the matestack helper to your controllers. If you want to make the helpers available in all controllers, add it to your 'ApplicationController' this way:


class ApplicationController < ActionController::Base
  include Matestack::Ui::Core::ApplicationHelper

Application Layout

You need to add the ID "matestack_ui" to some part of your application layout (or any layout you use)

For Example, your app/views/layouts/application.html.erb should look like this:

<!DOCTYPE html>
    <title>My App</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all' %>
    <%= javascript_include_tag 'application' %>

    <div id="matestack_ui">
      <%= yield %>

Don't apply the matestack_ui ID to the body tag.

Extend Asset Paths

In order to enable custom Vue.js components, add the matestack folder to the asset paths:


Rails.application.config.assets.paths << Rails.root.join('app/matestack/components')

Websocket Integration

If you want to use websockets, please read this guide