Matestack::Ui::VueJsComponent
. Matestack will then render a HTML component tag with some special attributes and props around the response defined in the Ruby component. The Vue.js JavaScript component (defined in a separate JavaScript file and managed via Webpacker) will treat the response of the Ruby component as its template.Matestack::Ui::VueJsComponent
:app/matestack/components/some_component.rb
app/matestack/components/some_component.js
Webpacker
is
and tells the JavaScript component that it should use the inner html (coming from the response
method) as the inline-template
of the component.{{ foo }}
will be evaluated to "bar" as soon as Vue.js has booted and mounted the component in the browser.props
and params
tags if either props or params are available. This data is injected once on initial server side rendering of the component's markup. See below, how you can pass in data to the Vue.js JavaScript component.vue_js_component_name
class methodapp/matestack/components/some_component.rb
component-config
prop as an attribute of the component tag. In order to fill in some date there, you should use the setup
method like this:app/matestack/components/some_component.rb
app/matestack/components/some_component.js
componentMixin
which gives the JavaScript component some essential functionalities in order to work properly within matestackapp/matestack/components/some_component.rb