Installation & Update
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.Add 'matestack-ui-vuejs' to your Gemfile
gem 'matestack-ui-vuejs', "~> 3.1.0"
and run
$ bundle install
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.rbclass ApplicationController < ActionController::Base
include Matestack::Ui::Core::Helper
#...
end
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;
}
This is optional but highly recommended for a better UI experience. More info here: https://vuejs.org/api/built-in-directives.html#v-cloak
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)
})
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)
}
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:
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!
Last modified 7mo ago