The components aspect of VueJS is one of the most attractive features VueJS brings to your frontend development. It allows for composable, reusable, and protected scope code, styles, and HTML. Working with protected scopes is the smart way for implementing coherent systems. And with the added benefit of VueJS protecting your style\u2019s scope to only affect your specific component, you\u2019ll have far fewer headaches with styling your site.<\/p>\n
With Webpack support being added to Rails as of Rails 5.1, the ecosystem for documentation on getting started is fairly young and missing many scenarios. So I\u2019m proud to be able to introduce one of the first posts on implementing VueJS Components with CoffeeScript in Rails. This can save you a couple of days of learning the hard way and will likely help existing VueJS\/Rails developers to perhaps learn a few new tricks.<\/p>\n
We\u2019ll be continuing from where we left off in the last blog post, VueJS as a Frontend for Rails<\/a>. If you\u2019d like a copy of the code state from that, here is the public GitHub repository for that: danielpclark\/vue_example<\/a>.<\/p>\n To allow Ruby code interpolation with Next we need to update our configuration file for webpack at to this:<\/p>\n Now we can have our Vue component files evaluate Rails methods and objects if we append the First we can move our form view from And we\u2019ll simplify the Before we finish by moving our CoffeeScript code from The HTML is the same for the form, but we do need to additionally wrap it by a single HTML tag for the template section of the component. For the Rails form helper method And one of the coolest things we\u2019ve done is moved the styles for the text area from the HTML into a style section that will only ever affect this component, as we\u2019ve used the On the Technically this particular technique is called a non-prop<\/a> since there isn\u2019t a corresponding prop defined. But we\u2019ll treat it the same way as a prop for getting data to our component. If we were to try to implement accessing this data from an external source, we\u2019d have to use more complex techniques with props like sync and\/or emit, but that\u2019s far more work than what our use case requires. The Since we\u2019ve also removed the Here, our component is imported to a Now let\u2019s look at what our CoffeeScript looks like when moved over to a component in Now our VueJS component should be working in our site. Just run If at any time the changes aren\u2019t showing up in your browser, you need to refresh the browser\u2019s cache with a hard reload. In the Chromium browser you can do this with CTRL-SHIFT-R.<\/p><\/blockquote>\n Here our use of The And with that you now have the ability to easily create and add as many VueJS components as you want to your Rails site. Next, we\u2019ll look at how easy it is to just drop in the show resource for our Documents resource as a VueJS component.<\/p>\n Because individual components use their own HTML style tag, you can include as many components in your source code and call them only where you want in your pages. So to change your show-resource for documents in your project, it\u2019s pretty simple. Add two lines near the beginning of your We\u2019ll be replacing the following HTML from with:<\/p>\n And write the component in Since we\u2019re not evaluating anything with Ruby in this component, we make the file extension Now that we have our show page converted to use VueJS, we can further build on it by including components within the component. This is a very useful technique for implementing a more dynamic comment system. Create your own comment components and include them in as many other components in your site as you\u2019d like.<\/p>\n Protecting the scope of what your code and styles have access to will make your code base a much more sane environment to work in. Both VueJS and CoffeeScript enforce a form of protected scope and help you write better code. With the problems we\u2019ve inherited from years of backwards compatibility in the frontend technology stack, it\u2019s really nice to work with technologies that help enforce good practices.<\/p>\n We\u2019ve now covered enough to make working with VueJS in Rails a far more pleasant experience. There are still so many more possibilities that branch out from this foundation of what you can do with VueJS, including visually dynamic content. If you need to have an excellent frontend framework of sorts to work with, then I highly recommend you seriously consider VueJS and CoffeeScript.<\/p>\nAdding ERB Support for .vue Files<\/h2>\n
.vue.erb<\/code> files like we have in .html.erb<\/code> files, we need to first add the rails-erb-loader<\/code> package with yarn.<\/p>\nyarn add rails-erb-loader<\/pre>\n
config\/webpack\/loaders\/vue.js<\/code> and change these lines:<\/p>\nmodule.exports = { \r\n test: \/\\.vue(\\.erb)?$\/,\r\n use: [{\r\n loader: 'vue-loader',\r\n options: { extractCSS }\r\n }] \r\n}<\/pre>\nmodule.exports = { \r\n test: \/\\.vue(\\.erb)?$\/,\r\n use: [{\r\n loader: 'vue-loader',\r\n options: { extractCSS }\r\n }, \r\n {\r\n loader: 'rails-erb-loader',\r\n options: {\r\n runner: 'bin\/rails runner',\r\n dependenciesRoot: '..\/app'\r\n }\r\n }]\r\n}<\/pre>\n.erb<\/code> extension to our .vue<\/code> files.<\/p>\nMoving VueJS Code into a Component<\/h2>\n
app\/views\/documents\/_form.html.erb<\/code> to our new file app\/javascript\/form-repository.vue.erb<\/code>.<\/p>\n<% include ActionView::Helpers::FormOptionsHelper %>\r\n\r\n<template>\r\n <div>\r\n <label>Subject<\/label>\r\n <input type=\"text\" v-model=\"document.subject\" \/>\r\n\r\n <label>State<\/label>\r\n <select v-model=\"document.state\">\r\n <%= options_for_select(Document.states.keys, \"concept\") %>\r\n <\/select>\r\n\r\n <label>Body<\/label>\r\n <textarea v-model=\"document.body\"><\/textarea>\r\n\r\n <br \/>\r\n\r\n <button v-on:click=\"Submit\">Submit<\/button>\r\n <\/div>\r\n<\/template>\r\n\r\n<style scoped>\r\n textarea {\r\n rows: 20;\r\n cols: 60;\r\n }\r\n<\/style><\/pre>\n_form.html.erb<\/code> page down to:<\/p>\n<% content_for :head do -%>\r\n <%= javascript_pack_tag 'documents' %>\r\n<% end -%>\r\n\r\n<div id=\"vue-app\">\r\n <form-document\r\n v-bind:document=\"<%= document.to_json(except: [:created_at, :updated_at]) %>\"\r\n >\r\n <\/form-document>\r\n<\/div><\/pre>\n
app\/javascript\/packs\/documents.coffee<\/code> into the same component file, let\u2019s go over some features of this change.<\/p>\noptions_for_select<\/code>, we needed to include the module that defines it \u2014 ActionView::Helpers::FormOptionsHelper<\/code> \u2014 directly from Rails on the first line.<\/p>\nscoped<\/code> attribute for style<\/code>.<\/p>\n_form.html.erb<\/code> partial page, we\u2019ve simplified the code greatly. The form-document<\/code> is a component name we\u2019re about to define in the CoffeeScript file. The v-bind:document<\/code> is a prop we\u2019re using to hand our document data directly to our component.<\/p>\nv-bind<\/code> evaluates what\u2019s on the right side of the equal sign to a JavaScript object for our non-prop prop.<\/p>\nid<\/code> we formerly used for a Vue object to initiate on, we\u2019ll need to add that to the list of things we change. We\u2019ll be stripping our app\/javascript\/packs\/documents.coffee<\/code> down to just the following.<\/p>\nimport Vue from 'vue\/dist\/vue.esm'\r\nimport TurbolinksAdapter from 'vue-turbolinks'\r\nimport VueResource from 'vue-resource'\r\nimport FormDocument from '..\/form-document.vue.erb'\r\n\r\nVue.use(VueResource)\r\nVue.use(TurbolinksAdapter)\r\n\r\nVue.component('form-document', FormDocument)\r\n\r\ndocument.addEventListener('turbolinks:load', ->\r\n Vue.http.headers.common['X-CSRF-Token'] = document\r\n .querySelector('meta[name=\"csrf-token\"]')\r\n .getAttribute('content')\r\n\r\n element = document.getElementById 'vue-app'\r\n\r\n if element?\r\n app = new Vue(el: element) \r\n)\r\n\r\nTurbolinks.dispatch(\"turbolinks:load\")<\/pre>\nFormDocument<\/code> object, and we make the component usable as a tag with the Vue.component<\/code> method. This needs to be defined before the first use of new Vue<\/code>, and any component used in a web page must be within HTML tags that an instance of new Vue<\/code> refers to. Since we call new Vue<\/code> with the id reference of #vue-app<\/code>, the div<\/code> tag in our HTML page is now our root for this Vue object. This allows us to use the form-document<\/code> tag in it like we would any other HTML tag.<\/p>\napp\/javascript\/form-repository.vue.erb<\/code>.<\/p>\n<script lang=\"coffee\">\r\nexport default\r\n props:\r\n document:\r\n type: Object\r\n required: true\r\n methods: Submit: ->\r\n ourDocument = @_props.document\r\n if ourDocument.id == null\r\n @$http # New action\r\n .post '\/documents', document: @document\r\n .then (response) ->\r\n Turbolinks.visit \"\/documents\/#{response.body.id}\"\r\n return\r\n (response) ->\r\n @errors = response.data.errors\r\n return\r\n else\r\n @$http # Edit action\r\n .put \"\/documents\/#{@document.id}\", document: @document\r\n .then (response) ->\r\n Turbolinks.visit \"\/documents\/#{response.body.id}\"\r\n return\r\n (response) ->\r\n @errors = response.data.errors\r\n return\r\n return\r\n<\/script><\/pre>\nrails s<\/code> and open your web browser to localhost:3000\/documents<\/code>.<\/p>\nprops<\/code> is a form of type checker. I highly encourage that you use this technique for all props as it will give you very helpful information should you not be getting the prop into your component as you expected. You can look into implementing further prop validations at prop validations<\/a>.<\/p>\nexport default<\/code> line is a JavaSciprt feature that has the following code all included as the main object when you use the import SomeName
\nfrom 'source_code'<\/code> to require it. The other difference in our code here is the @_props.document<\/code> line. The @_props<\/code> gives us direct access to the props passed in on this._props<\/code>.<\/p>\nMultiple Components Per Rails Resource<\/h2>\n
app\/javascript\/packs\/documents.coffee<\/code> file:<\/p>\nimport ShowDocument from '..\/show-document.vue'\r\nVue.component('show-document', ShowDocument)<\/pre>\napp\/views\/documents\/show.html.erb<\/code>:<\/p>\n<p>\r\n <strong>Subject:<\/strong>\r\n <%= @document.subject %>\r\n<\/p>\r\n\r\n<p>\r\n <strong>Body:<\/strong>\r\n <%= @document.body %>\r\n<\/p>\r\n\r\n<p>\r\n <strong>State:<\/strong>\r\n <%= @document.state %>\r\n<\/p><\/pre>\n
<% content_for :head do -%>\r\n <%= javascript_pack_tag 'documents' %>\r\n<% end -%>\r\n\r\n<div id=\"vue-app\">\r\n <show -document\r\n v-bind:document=\"<%= @document.to_json(except: [:created_at, :updated_at]) %>\"\r\n >\r\n <\/show>\r\n<\/div><\/pre>\n
app\/javascript\/show-document.vue<\/code> as:<\/p>\n<template>\r\n <div>\r\n <p> \r\n <strong>Subject:<\/strong>\r\n {{ document.subject }}\r\n <\/p>\r\n\r\n <p> \r\n <strong>Body:<\/strong>\r\n {{ document.body }}\r\n <\/p>\r\n\r\n <p> \r\n <strong>State:<\/strong>\r\n {{ document.state }}\r\n <\/p>\r\n <\/div>\r\n<\/template>\r\n\r\n<script lang=\"coffee\">\r\nexport default\r\n props:\r\n document:\r\n type: Object\r\n required: true\r\n<\/script><\/pre>\n.vue<\/code>. We\u2019re still using our prop validation technique. And we\u2019re using Vue\u2019s interpolation braces to fill out our values for the view.<\/p>\nSummary<\/h2>\n