Ruby on Rails + Vue.js Vuetifyを導入する方法
はじめに
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 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を編集し、Vuetifyでv-file-inputを使用し表示されるか確認
<template>
<v-file-input truncate-length="15"></v-file-input>
</template>