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
app/javascript/packs/application.js
config/importmap.rb
app/javascript/packs/application.js
is
and tells the JavaScript component that it should use the inner html (coming from the response
method) as the template of the component.{{ vc.foo }}
will be evaluated to "bar" as soon as Vue.js has booted and mounted the component in the browser. {{ foo }}
is not working!vc.
is short for Vue Component
and is necessary for referencing the correct component scope. Within the JavaScript file, you still simply use this.
The prefix is required since Vue 3 removed proper inline template support. Behind the scenes MatestackUiVueJs is using Vue's default slot
mechanism in order to enable inline templates.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_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
and template
which gives the JavaScript component some essential functionalities in order to work properly within MatestackUiVueJs.this.getRefs()
instead of this.$refs
matestack_ui_vuejs_ref()
when applying refs to your componen template:this.getElement()
instead of this.$el
in order to get the root element defined in your response
methodthis.getTemplateElement()
in order to get the template element wrapping the root element defined in your response
method