Matestack Ui VueJs
AboutMatestack Ui CoreMatestack Ui VueJsMatestack Ui Bootstrap
  • Welcome
  • Migrating to 3.0
  • Back to 2.1 (via Core)
  • Getting started
    • Installation & Update
      • Webpacker Install Steps
      • Importmap Install Steps
      • JSBundling-Rails Install
    • Hello World
  • Built-in Reactivity
    • Emit Client Side Events
      • Onclick Component API
    • Toggle UI States
      • Toggle Component API
    • Call Server Side Actions
      • Action Component API
    • Reactive Forms
      • Overview
      • Form Component API
      • Input Component API
      • Textarea Component API
      • Checkbox Component API
      • Select Component API
      • Radio Component API
      • Nested Forms
    • Partial UI Updates
      • Overview
      • Async Component API
      • Cable Component API
      • Isolated Component API
    • Page Transitions
      • Transition Component API
    • Reactive Collections
      • Overview & API
  • Custom Reactivity
    • Custom Vue.js Components
    • Matestack's Vue.js APIs
    • Third party Vue.js Components
    • Third Party JavaScript
  • Integrations
    • Action Cable
    • Devise
  • Contribute
Powered by GitBook
On this page
  • Depenencies
  • Installation
  • Matestack Ui Core install steps (if not already happened)
  • Application layout adjustments
  • JavaScript installation
  • Usage with Turbolinks
  • Usage with Turbo
  • ActionCable Integration
  • Update
  • Ruby Gem
  1. Getting started

Installation & Update

Depenencies

matestack-ui-vuejs requires matestack-ui-core. Make sure to follow the install guide from https://docs.matestack.io/matestack-ui-core/getting-started/installation-update and understand the concepts of matestack-ui-core.

Installation

Add 'matestack-ui-vuejs' to your Gemfile

gem 'matestack-ui-vuejs', "~> 3.1.0"

and run

$ bundle install

Matestack Ui Core install steps (if not already happened)

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

$ mkdir app/matestack

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:

app/controllers/application_controller.rb

class ApplicationController < ActionController::Base
  include Matestack::Ui::Core::Helper
  #...
end

Application layout adjustments

You need to add the ID "matestack-ui" to some part of your application layout (or any layout you use). That's required for Matestack's Vue.js to work properly!

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

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

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

    <!-- if you are using webpacker: -->
    <%= javascript_pack_tag 'application' %>

    <!-- if you are using importmap: -->
    <%= javascript_importmap_tags %>
  </head>

  <body>
    <div id="matestack-ui" v-cloak>
      <%= yield %>
    </div>
  </body>
</html>

Don't apply the "matestack-ui" id to the body tag.

v-cloak is used to avoid to hide un-compiled Vuejs templates until they are ready when using a CSS rule like:

[v-cloak] {
  display: none;
}

JavaScript installation

Webpacker > 5.x based JavaScript installation

Rails 7 importmap based JavaScript installation

JSBundling-Rails based JavaScript installation

Usage with Turbolinks

If you want to use matestack-ui-vuejs alongside with Turbolinks or Turbo, please add:

yarn add vue-turbolinks

And use following snippet instead:

import { createApp } from 'vue'
import MatestackUiVueJs from 'matestack-ui-vuejs'
import TurbolinksAdapter from 'vue-turbolinks'; // import vue-turbolinks

const appInstance = createApp({})

appInstance.use(TurbolinksAdapter); // tell Vue to use it

// change the trigger event
document.addEventListener('turbolinks:load', () => {
  MatestackUiVueJs.mount(appInstance)
})

Usage with Turbo

Not tested yet!

import { createApp } from 'vue'
import MatestackUiVueJs from 'matestack-ui-vuejs'

const appInstance = createApp({})

// change the trigger event
document.addEventListener('turbo:load', () => {
  MatestackUiVueJs.mount(appInstance)
}

ActionCable Integration

Some of Matestack's reactive components may be used with or require ActionCable. If you want to use ActionCable, please read the action cable guide:

Update

Ruby Gem

Depending on the entry in your Gemfile, you might need to adjust the allowed version ranges in order to update the Gem. After checked and adjusted the version ranges, run:

bundle update matestack-ui-vuejs

and then check the installed version:

bundle info matestack-ui-vuejs

If you've installed the JavaScript dependecies via Yarn/Webpacker you need to update the JavaScript assets via yarn:

yarn update matestack-ui-vuejs

and finally check if the correct version is installed:

yarn list --pattern "matestack-ui-vuejs"

The Ruby gem version and the npm package version should match!

PreviousMigrating to 3.0NextWebpacker Install Steps

Last updated 2 years ago

This is optional but highly recommended for a better UI experience. More info here:

https://vuejs.org/api/built-in-directives.html#v-cloak
Webpacker Install Steps
Importmap Install Steps
JSBundling-Rails Install
Action Cable