49
47

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

railsでVue.jsを使ってみる

Last updated at Posted at 2014-08-10

今話題ののvue.jsを既存のrailsのアプリケーションで使ってみたかったので、使う際の手順を書いておきます。

vue.jsに関しては、かなりまとめられた記事があるのでそちらを参考にしてください。

参考:
Vue.js概要?
はじめよう Vue.js
Vue.jsから手軽に始めるJavaScriptフレームワーク

##インストール
まずはvue.jsをインストールしましょう。
本家サイトからインストールしてきても良いかと思いますが、今回はRails Assetsを使ってインストールします。

####Rails Assetsとは?
Rails Assetsは少し前に話題になった、Bower(※Twitter社が作ったフロントエンド用のパッケージマネージャ)で管理しているパッケージをbundlerでインストールできるサービス。

Rails Assetsに関しての参考記事:
bowerパッケージをbundlerで管理するRails Assetsを使ってみた
Railsプロジェクトでassetsファイルを効率的に管理する
Rails Assets を使って Rails プロジェクトに AngularJS をインストール

Bowerに関しての参考記事:
Bower入門(基礎編)
パッケージマネージャー「Bower」が大変便利で捗りそうです

Gemfileに下記を追加。

source 'https://rails-assets.org'

gem 'rails-assets-vue'
$ bundle install

...

Installing rails-assets-vue 0.10.6

...

無事vue.jsが入った。
application.jsに下記を追加すれば完了。

app/assets/javascripts/application.js
//= require vue

##実際に書いてみる

簡単なコードを実際に書いてみる。
rubyのテンプレートエンジンをerbであれば{{msg}}を書けば問題ないが、slimにしていたので、ちょっとだけ手こずったw
="{{}}"こう書かないとだめみたいです。

app/assets/javascripts/tests.js.coffee
$ ->
  new Vue(
    el: '#hoge',
    data:
      msg: 'Hello Vue.js!'
  )
app/views/tests/hoge.html.slim
div#hoge
  = "{{msg}}"

無事表示されました。これでvue.jsが使える(´ω`)=3

49
47
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
49
47

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?