Ruby on Rails + Vue.js Vuetifyを導入する方法

f:id:nkeke0:20210331103144p:plain

はじめに

Rails + Vueで、Vuetifyを導入しました。

Railsを使っているから特別なものをダウンロードをする、というのはありませんが、導入しウェブアプリを開発する機会がありましたので導入方法を記載します。

 

Ruby on Railsを基礎から学びたい】よくわかるRuby on Rails入門 オンライン講座

Vuetifyをインストール


 yarn add vuetify
 
 

Vuetifyの読み込み

デフォルトで作成されている"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);
 });
 
 

ファイルの作成

Vue-routerをインストール


 yarn add vue-router
 
 

javascript/app.vueを編集

 
<template>
 <div id="main">
  <v-app id="app"> //vuetifyを機能させる為に追加
   <router-view></router-view>
  </v-app>
 </div>
</template>

<script>
import Vue from 'vue'
import VueRouter from 'vue-router'

import Test from 'Test.vue'

const router = new VueRouter({
 routes: [
 { path: '/',
  component: Test }
 ]
 })

 Vue.use(VueRouter)

 export default {
 router
 }
</script>
 
 

javascript/Test.vueを編集し、Vuetifyv-file-inputを使用し表示されるか確認


<template>
  <v-file-input truncate-length="15"></v-file-input>
</template>

無事にファイル用インプットボックスが表示されていればRuby on RailsVuetifyの導入完了です!

 

参考サイト

ファイルインプット・コンポーネント — Vuetify

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