{"id":21234,"date":"2018-03-20T12:15:03","date_gmt":"2018-03-20T10:15:03","guid":{"rendered":"https:\/\/www.webcodegeeks.com\/?p=21234"},"modified":"2018-03-16T12:45:16","modified_gmt":"2018-03-16T10:45:16","slug":"vuejs-as-a-frontend-for-rails","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/vuejs-as-a-frontend-for-rails\/","title":{"rendered":"VueJS as a Frontend for Rails"},"content":{"rendered":"

VueJS is one of the fastest rising stars in the JavaScript frontend ecosystem. It largely embodies simplicity and composability of frontend design solutions without going overboard. It provides a more elegant way to reduce complexity in both scripting and your styling by grouping them into components<\/em>. This protects your site\u2019s styles from conflicts and also provides logical organization for individual parts of your frontend code.<\/p>\n

Getting Started<\/h2>\n

Some brief setup instructions.<\/p>\n

gem install rails --version \"5.2.0.rc1\"\r\nrails _5.2.0.rc1_ new vue_example --webpack=vue\r\ncd vue_example<\/pre>\n
From this point, you can start work on VueJS without CoffeeScript support (we\u2019ll add that later). Rails includes an example of both frontend VueJS integration and what\u2019s called a component<\/em>. These files are available at app\/javascript\/packs\/hello_vue.js<\/code> and the component at app\/javascript\/hello.vue<\/code>. If you would like to challenge yourself to learn the process of integrating these, this is a good place to start.<\/p>\n
The Rails Vue Example<\/h2>\n
You may follow the instructions in this section if you wish to try Rails\u2019 small challenge. Comment out the existing code in hello_vue.js<\/code> and uncomment the code in the last section:<\/p>\n
import TurbolinksAdapter from 'vue-turbolinks';\r\nimport Vue from 'vue\/dist\/vue.esm'\r\nimport App from '..\/app.vue'\r\n\r\nVue.use(TurbolinksAdapter)\r\n\r\ndocument.addEventListener('turbolinks:load', () => {\r\n  const app = new Vue({\r\n    el: '#hello',\r\n    data: {\r\n      message: \"Can you say hello?\"\r\n    },\r\n    components: { App }\r\n  })\r\n})<\/pre>\n
Create a route and controller to work with and add the root route to the config to point to it.<\/p>\n
rails g controller LandingPage index<\/pre>\n
And add to the config\/routes.rb<\/code> file:<\/p>\n
root to: \"landing_page#index\"<\/pre>\n
You can test that this works by running rails s<\/code> and having your web browser load http:\/\/localhost:3000<\/code>. From ther, the challenge is up to you to learn what HTML- and JavaScript-related code to put in the site template and landing page to get both VueJS examples to work. That\u2019s there for you to do, now let\u2019s go and do our own form implementation in VueJS.<\/p>\n
Vue JS Rails Form Example<\/h2>\n
For this example, we\u2019re going to create a form for a writer to keep track of their own documents \u2014 it will contain a subject, body of text, and the state of revision.<\/p>\n
First, let\u2019s generate the scaffolding for the document resource.<\/p>\n
rails g scaffold Document subject:string:index body:text state:integer:index<\/pre>\n
Then edit the migration file under db\/migrate<\/code> and change the line for state to provide a default value.<\/p>\n
t.integer :state, default: 0, null: false<\/pre>\n
Now we can run rails db:migrate<\/code> to update or database. Next we need to update our model for the different states the document may be in. Open up app\/models\/document.rb<\/code> and add the following:<\/p>\n
class Document < ApplicationRecord\r\n  enum state: [:concept, :alpha, :beta, :draft, :publish]\r\nend<\/code><\/pre>\n
At this point, we\u2019re ready to start seeing the changes we\u2019ll be making, so first we\u2019ll create a CoffeeScript file and then start a Rails server so we can refresh our browser to work with the results. In a new terminal window, run the following from your project directory:<\/p>\n
<% if content_for? :head %>\r\n  <%= yield :head %>\r\n<% end %><\/pre>\n
Now we have a hook we can use on any page if we use content_for(:head)<\/code> and give it a code block, which will be written to the head section of our specific pages.<\/p>\n
Open up app\/views\/documents\/_form.html.erb<\/code> and erase all the contents of the file. This form is used for new entries and updating existing entries in Rails for our documents. First, let\u2019s put in the header code block to load what will be our VueJS code.<\/p>\n
<% content_for :head do -%> \r\n  <%= javascript_pack_tag 'documents' %>\r\n<% end -%><\/pre>\n
At this point, trying to load localhost:3000\/documents<\/code> in our browser won\u2019t work; we need it to recognize our .coffee<\/code> file extension. You can stop the server running in the terminal with CTRL-C and run the following.<\/p>\n
bundle exec rails webpacker:install:coffee<\/pre>\n
Caution: Be sure to do your new feature installations in small steps all while verifying they work before adding more features. Otherwise this, plus a bunch of yarn add<\/code> commands before testing, can lead to this feature not working at all.<\/p>\n
Now you can run rails s<\/code> again and bring your browser back to localhost:3000\/documents<\/code> and see that the page loads without any errors. We can continue on to the form now. Let\u2019s update the same file we were just working on to the following.<\/p>\n
<% content_for :head do -%>\r\n  <%= javascript_pack_tag 'documents' %>\r\n<% end -%>\r\n\r\n<%= content_tag :div,\r\n  id: \"document-form\",\r\n  data: {\r\n    document: document.to_json(except: [:created_at, :updated_at])\r\n  } do %>\r\n\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\" rows=\"20\" cols=\"60\"><\/textarea>\r\n\r\n  <br \/>\r\n\r\n  <button v-on:click=\"Submit\">Submit<\/button>\r\n\r\n<% end %><\/pre>\n
Before writing the CoffeeScript implementation for our VueJS code, let\u2019s briefly go over what we have in the file above. The first block of code we\u2019ve already discussed will load our CoffeeScript asset code in the header through our application template. The content_tag<\/code> will create a div that stores our current pages\u2019 document object as JSON. The document that\u2019s created or loaded in the controller gets converted there, and this is what the VueJS code will use.<\/p>\n
The v-model<\/code> items are all VueJS-specific names our code will keep track of. For the select field<\/code>, I\u2019ve found that the Rails options_for_select<\/code> is much easier to work with than VueJS\u2019 v-for<\/code> technique, as it\u2019s problematic trying to get it to select a selected<\/code> option. And yes, I\u2019ve tried the half dozen variations of how-tos available on the web for it all to no avail. There is a multi-select add-on you could install with Yarn, but that\u2019s a bit excessive for our simple use case.<\/p>\n
The v-on:click<\/code> will call the Submit<\/code> function in our Vue object (once we define it) to perform the actions defined there.<\/p>\n
Before continuing on, I\u2019d like to share how the basic VueJS option<\/code> implementation would work if we used that here instead.<\/p>\n
<select v-model=\"document.state\">\r\n  <option v-for=\"state in <%= Document.states.keys.to_json %>\"\r\n    :value=state\r\n  >\r\n    {{ state }}\r\n  <\/option>\r\n<\/select><\/pre>\n
You should recognize the ERB template <%= %><\/code>, which will have Ruby get our states of the document and prepare it as JSON. The v-for<\/code> is part of Vue\u2019s own DSL, which treats the content like normal for loop code. For every document state, this will duplicate the HTML <option><\/code> tags and put the replacement word for the state variable on both the value parameter and in the {{ }}<\/code> place.<\/p>\n
One last thing I\u2019d like to point out that VueJS has is from their core documentation:<\/p>\n
<my -component\r\n  v-for=\"(item, index) in items\"\r\n  v-bind:item=\"item\"\r\n  v-bind:index=\"index\"\r\n  v-bind:key=\"item.id\"\r\n><\/my><\/pre>\n
We haven\u2019t covered components yet, but what I\u2019d like to point out in this example is that the use of v-bind<\/code> here will execute what\u2019s in the quotation marks as regular JavaScript. So each of these values gets assigned from the JS scope.<\/p>\n
Now onto the CoffeeScript VueJS code for our form.<\/p>\n
The Code<\/h2>\n
Now we need to install some Yarn dependencies for having Vue work with Turbolinks in Rails and for more convenient PUT\/POST commands.<\/p>\n
yarn add vue-resource vue-turbolinks<\/pre>\n
Now our VueJS code can be written in app\/javascript\/packs\/documents.coffee<\/code>. You get extra credit if you\u2019ve already realized that by using the word \u2018document\u2019 we\u2019ve used a conflicting JavaScript keyword. Because this is the case, we\u2019ll use the variable ourDocument<\/code> in the script to keep things clear and working.<\/p>\n
import Vue from 'vue\/dist\/vue.esm'\r\nimport TurbolinksAdapter from 'vue-turbolinks'\r\nimport VueResource from 'vue-resource'\r\n\r\nVue.use(VueResource)\r\nVue.use(TurbolinksAdapter)\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 'document-form'\r\n\r\n  if element != null\r\n    ourDocument = JSON.parse(element.dataset.document)\r\n\r\n    app = new Vue(\r\n      el: element\r\n\r\n      data: ->\r\n        { document: ourDocument }\r\n\r\n      methods: Submit: ->\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  )\r\n)<\/pre>\n
The event turbolinks:load<\/code> is the trigger to run this code whenever a page loads in Rails. This code needs to be executed within the <head><\/code> section of web pages, or you\u2019ll get side effects of it not loading without a refresh.<\/p>\n
The next line gets the CSRF token, which is needed to verify any data submitted to the server. It takes it from what Rails hands us and assigns it to a response header.<\/p>\n
Next we have an assignment of an element with an id of document-form<\/code>. This is an id we\u2019ve placed in our content_tag<\/code> earlier. The rest of this script is based off of this existing since we do a check if element != null<\/code>.<\/p>\n
The ourDocument<\/code> variable is assigned the data we placed in the page as JSON in the content_tag :div<\/code> for the data section. It parses the JSON data, and we continue.<\/p>\n
Next we create a Vue object instance in JavaScript(CoffeeScript) with its first parameter being the element<\/code>, which is the document form.<\/p>\n
Under methods<\/code>, we have our Submit<\/code> function, which is triggered via the submit button on the page. The if<\/code> conditional that follows that is a check to see if it\u2019s a new object and we should use the Rails \u201cnew record\u201d path, or if it\u2019s an existing object and we\u2019ll use PUT to update it.<\/p>\n
The @http<\/code>, post<\/code>, put<\/code>, and then<\/code> are all benefits from the vue-resource<\/code> Yarn package we installed earlier. It actually reads out pretty well as is. Just by looking at it, you can see it posts some data to a server URL and then<\/em> gives us a response. The response<\/code> in parenthesis is a function parameter, and we have two paths for it. The first is the good server response path, and the other is an error situation.<\/p>\n
This is surprisingly straight-forward once you know the parts. And with that, we have a VueJS form for our Rails site that works well and loads quickly.<\/p>\n
About Components<\/h2>\n
One of the main attractions about VueJS is its components. What it provides is one location for each component you want to create to have the HTML, JavaScript, and CSS styles all in their own vue<\/code> file. These components boast that the styles won\u2019t collide with styles elsewhere on your site. They are well-contained and organized singular functional units of code that may be used most anywhere and can be potentially extended or included within other components. Think of components as the ultimate building block.<\/p>\n
If you\u2019ve done the challenge shown at the beginning of this post, or noticed the component example we breezed by, you most likely have discovered that components get their own XML\/HTML tag. The example above is called <my-component><\/code> and is valid for HTML documents. Doing the Rails provided example will show you just how easy it is to drop a component in place.<\/p>\n
Summary<\/h2>\n
The possibilities with VueJS are pretty high as there are many add-on systems you can integrate with designed to make it work more like a full framework. So you can do as little or as much as you want with it \u2014 you\u2019re given the liberty to choose however you like.<\/p>\n
VueJS has excellent tools to work with for diagnosing both state and issue that may arise. You can get a browser plugin for Chrome or Firefox and even try out their Electron app. Check them out at vue-devtools<\/a>. Enjoy!<\/p>\n
\n\n\n\n
Published on Web Code Geeks with permission by Daniel P. Clark, partner at our WCG program<\/a>. See the original article here: VueJS as a Frontend for Rails<\/a><\/p>\n
Opinions expressed by Web Code Geeks contributors are their own.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
VueJS is one of the fastest rising stars in the JavaScript frontend ecosystem. It largely embodies simplicity and composability of frontend design solutions without going overboard. It provides a more elegant way to reduce complexity in both scripting and your styling by grouping them into components. This protects your site\u2019s styles from conflicts and also …<\/p>\n","protected":false},"author":146,"featured_media":4127,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[95,427],"class_list":["post-21234","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-rails","tag-vue-js"],"yoast_head":"\nVueJS as a Frontend for Rails - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"VueJS is one of the fastest rising stars in the JavaScript frontend ecosystem. It largely embodies simplicity and composability of frontend design\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/vuejs-as-a-frontend-for-rails\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"VueJS as a Frontend for Rails - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"VueJS is one of the fastest rising stars in the JavaScript frontend ecosystem. It largely embodies simplicity and composability of frontend design\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/vuejs-as-a-frontend-for-rails\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2018-03-20T10:15:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/rubyonrails-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Daniel P. Clark\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Daniel P. Clark\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/vuejs-as-a-frontend-for-rails\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/vuejs-as-a-frontend-for-rails\/\"},\"author\":{\"name\":\"Daniel P. Clark\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/a79c83c57cba5d8a6e46462149890b5e\"},\"headline\":\"VueJS as a Frontend for Rails\",\"datePublished\":\"2018-03-20T10:15:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/vuejs-as-a-frontend-for-rails\/\"},\"wordCount\":1606,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/vuejs-as-a-frontend-for-rails\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/rubyonrails-logo.jpg\",\"keywords\":[\"Rails\",\"Vue.js\"],\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/vuejs-as-a-frontend-for-rails\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/vuejs-as-a-frontend-for-rails\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/vuejs-as-a-frontend-for-rails\/\",\"name\":\"VueJS as a Frontend for Rails - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/vuejs-as-a-frontend-for-rails\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/vuejs-as-a-frontend-for-rails\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/rubyonrails-logo.jpg\",\"datePublished\":\"2018-03-20T10:15:03+00:00\",\"description\":\"VueJS is one of the fastest rising stars in the JavaScript frontend ecosystem. It largely embodies simplicity and composability of frontend design\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/vuejs-as-a-frontend-for-rails\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/vuejs-as-a-frontend-for-rails\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/vuejs-as-a-frontend-for-rails\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/rubyonrails-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/rubyonrails-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/vuejs-as-a-frontend-for-rails\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"VueJS as a Frontend for Rails\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/a79c83c57cba5d8a6e46462149890b5e\",\"name\":\"Daniel P. Clark\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2342ad14824a1064823dcec81641a12136a3492abae522e473ec723cbfb84bce?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2342ad14824a1064823dcec81641a12136a3492abae522e473ec723cbfb84bce?s=96&d=mm&r=g\",\"caption\":\"Daniel P. Clark\"},\"description\":\"Daniel P. Clark is a freelance developer, as well as a Ruby and Rust enthusiast. He writes about Ruby on his personal site.\",\"url\":\"https:\/\/www.webcodegeeks.com\/author\/daniel-clark\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"VueJS as a Frontend for Rails - Web Code Geeks - 2026","description":"VueJS is one of the fastest rising stars in the JavaScript frontend ecosystem. It largely embodies simplicity and composability of frontend design","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/javascript\/vuejs-as-a-frontend-for-rails\/","og_locale":"en_US","og_type":"article","og_title":"VueJS as a Frontend for Rails - Web Code Geeks - 2026","og_description":"VueJS is one of the fastest rising stars in the JavaScript frontend ecosystem. It largely embodies simplicity and composability of frontend design","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/vuejs-as-a-frontend-for-rails\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2018-03-20T10:15:03+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/rubyonrails-logo.jpg","type":"image\/jpeg"}],"author":"Daniel P. Clark","twitter_card":"summary_large_image","twitter_creator":"@webcodegeeks","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Daniel P. Clark","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/vuejs-as-a-frontend-for-rails\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/vuejs-as-a-frontend-for-rails\/"},"author":{"name":"Daniel P. Clark","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/a79c83c57cba5d8a6e46462149890b5e"},"headline":"VueJS as a Frontend for Rails","datePublished":"2018-03-20T10:15:03+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/vuejs-as-a-frontend-for-rails\/"},"wordCount":1606,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/vuejs-as-a-frontend-for-rails\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/rubyonrails-logo.jpg","keywords":["Rails","Vue.js"],"articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/vuejs-as-a-frontend-for-rails\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/vuejs-as-a-frontend-for-rails\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/vuejs-as-a-frontend-for-rails\/","name":"VueJS as a Frontend for Rails - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/vuejs-as-a-frontend-for-rails\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/vuejs-as-a-frontend-for-rails\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/rubyonrails-logo.jpg","datePublished":"2018-03-20T10:15:03+00:00","description":"VueJS is one of the fastest rising stars in the JavaScript frontend ecosystem. It largely embodies simplicity and composability of frontend design","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/vuejs-as-a-frontend-for-rails\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/vuejs-as-a-frontend-for-rails\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/vuejs-as-a-frontend-for-rails\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/rubyonrails-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/rubyonrails-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/vuejs-as-a-frontend-for-rails\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"VueJS as a Frontend for Rails"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/a79c83c57cba5d8a6e46462149890b5e","name":"Daniel P. Clark","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2342ad14824a1064823dcec81641a12136a3492abae522e473ec723cbfb84bce?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2342ad14824a1064823dcec81641a12136a3492abae522e473ec723cbfb84bce?s=96&d=mm&r=g","caption":"Daniel P. Clark"},"description":"Daniel P. Clark is a freelance developer, as well as a Ruby and Rust enthusiast. He writes about Ruby on his personal site.","url":"https:\/\/www.webcodegeeks.com\/author\/daniel-clark\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/21234","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/146"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=21234"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/21234\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/4127"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=21234"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=21234"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=21234"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}