# Installation & Update ## Depenencies `matestack-ui-vuejs` requires `matestack-ui-core`. Make sure to follow the install guide from and understand the concepts of `matestack-ui-core`. ## Installation Add 'matestack-ui-vuejs' to your Gemfile ```ruby 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` ```ruby 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: ```markup My App <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag 'application', media: 'all' %> <%= javascript_pack_tag 'application' %> <%= javascript_importmap_tags %>
<%= yield %>
``` {% hint style="warning" %} Don't apply the "matestack-ui" id to the body tag. {% endhint %} {% hint style="success" %} `v-cloak` is used to avoid to hide un-compiled Vuejs templates until they are ready when using a CSS rule like: ```css [v-cloak] { display: none; } ``` This is optional but highly recommended for a better UI experience. More info here: {% endhint %} ### JavaScript installation #### Webpacker > 5.x based JavaScript installation {% content-ref url="/pages/WSTUokqSufcVdZK7GBO4" %} [Webpacker Install Steps](/matestack-ui-vuejs/getting-started/installation-update/webpacker-install-steps.md) {% endcontent-ref %} #### Rails 7 importmap based JavaScript installation {% content-ref url="/pages/KIFChOjUXwk6gAiphGK8" %} [Importmap Install Steps](/matestack-ui-vuejs/getting-started/installation-update/importmap-install-steps.md) {% endcontent-ref %} #### JSBundling-Rails based JavaScript installation {% content-ref url="/pages/SWCgFGHvj6b1IN1mMnoE" %} [JSBundling-Rails Install](/matestack-ui-vuejs/getting-started/installation-update/jsbundling-rails-install.md) {% endcontent-ref %} ### Usage with Turbolinks If you want to use `matestack-ui-vuejs` alongside with Turbolinks or Turbo, please add: ```bash yarn add vue-turbolinks ``` And use following snippet instead: ```javascript 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! ```javascript 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: {% content-ref url="/pages/VhN3TNEzDN1lHvZKGL4i" %} [Action Cable](/matestack-ui-vuejs/integrations/action-cable.md) {% endcontent-ref %} ## 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: ```bash bundle update matestack-ui-vuejs ``` and then check the installed version: ```bash bundle info matestack-ui-vuejs ``` If you've installed the JavaScript dependecies via Yarn/Webpacker you need to update the JavaScript assets via yarn: ```bash yarn update matestack-ui-vuejs ``` and finally check if the correct version is installed: ```bash yarn list --pattern "matestack-ui-vuejs" ``` {% hint style="warning" %} The Ruby gem version and the npm package version should match! {% endhint %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.matestack.io/matestack-ui-vuejs/getting-started/installation-update.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.