49
46

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 3 years have passed since last update.

【Rails6】10分でRails + Vue + Vuetifyの環境を構築する

Posted at

前提条件

  • Rails6
  • Vue.js 2.6.10
  • vuetify 2.1.13
  • yarnが入っていること

構築手順

1. rails newでプロジェクトを作成

この時、--webpack=vueを指定する

bash
rails new --webpack=vue

この時yarnやwebpacker関連のエラーが出た場合は以下の記事を参考にしてください
#####Rails6 開発時につまづきそうな webpacker, yarn 関係のエラーと解決方法
https://qiita.com/NaokiIshimura/items/8203f74f8dfd5f6b87a0

サーバーを起動

bash
rails s

http://localhost:3000/ に接続して以下の画面が表示されればOKです。
image.png

2.VueのHello Worldを表示させる

データベースを作成

bash
rails db:create

コントローラー作成

bash
rails g controller home index

ルーティングを設定

config/routes.rb
Rails.application.routes.draw do
  root to: 'home#index'
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end

viewを作成

app/views/home/index.html.erb
<%= javascript_pack_tag 'hello_vue' %>

再びhttp://localhost:3000 に接続して以下の画面が表示されればVueの環境構築は完了です。

image.png

3. Vuetifyをインストール

yarnを使ってvuetifyをインストールします

bash
yarn add vuetify

以下の表示がされればインストール完了です

bash
  Done in 7.03s.

#4. Vuetifyのボタンを表示させる

Vuetifyの読み込み

rails new --webpack=vueのおかげでデフォルトで作成されていると思います

app/javascript/packs/hello_vue.js
import Vue from "vue";
import App from "../app.vue";


document.addEventListener("DOMContentLoaded", () => {
  const app = new Vue({
    render: h => h(App)
  }).$mount();
  document.body.appendChild(app.$el);

  console.log(app);
});

このファイルを編集していきます。

app/javascript/packs/hello_vue.js
import Vue from "vue";
import Vuetify from "vuetify"; // 追加
import "vuetify/dist/vuetify.min.css"; // 追加
import App from "../app.vue";

Vue.use(Vuetify); // 追加
const vuetify = new Vuetify(); // 追加

document.addEventListener("DOMContentLoaded", () => {
  const app = new Vue({
    vuetify, // 追加
    render: h => h(App)
  }).$mount();
  document.body.appendChild(app.$el);

  console.log(app);
});

Vuetifyで表示させるファイルを作成

こちらもデフォルトで作成されていると思います

app/javascript/app.vue
<template>
  <div id="app">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      message: "Hello Vue!"
    };
  }
};
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

こちらのファイルにVuetifyのボタンを追加します。

app/javascript/app.vue
<template>
  <v-app id="app"> <!-- 追加 -->
    <v-btn>Vuetifyのボタン</v-btn> <!-- 追加 -->
    <div>  <!-- 更新 -->
      <p>{{ message }}</p>
    </div>
  </v-app> <!-- 追加 -->
</template>

<script>

これでhttp://localhost:3000 に接続し、以下のような表示になれば
Rails + Vue + Vuetifyの環境構築は完了です!

image.png

おつかれさまでした!

終わりに

この記事が皆様のRailsライフのお役にたてれば幸いです。
この他にもRails中心の記事を書いています!

49
46
0

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
46

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?