背景
vue, vuetifyをインストールするぐらいならすぐ終わるだろうと思ってましたが、意外と手こずったので、次に同じエラーを起こさないように、備忘録として残しておきます。
前提
vue(webpack)がインストールされている。
書きました→Rails内にVueを導入
方法(というかプロセス)
最初はこのqiitaを参考にしました。
https://qiita.com/onoblog/items/e1a94fde9ed50f451d13
その後、Vuetifyを読み込んだら、コンソールでエラー確認。Vuetifyのパーツが読み込まれていなかった。
v-toolbarが読み込まれてない。
Vue warn]: Error in render: "TypeError: Cannot read property 'smAndDown' of undefined"
これが同じの6こくらい。
vue.esm.js:1937 TypeError: Cannot read property 'smAndDown' of undefined
↓
ググったら、この記事を発見。(これでvuetifyが表示されるようになった)
https://stackoverflow.com/questions/58070686/cannot-read-property-t-of-undefined-using-vuetify-and-laravel/58070989
new Vue({
el: '#app',
vuetify: new Vuetify()
})
終わりです。
一応コード
hello_vue.js
// import Vue from 'vue/dist/vue.esm';
//environment.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,
vuetify: new Vuetify(),
el: '#hello',
render: h => h(App)
}).$mount()
document.body.appendChild(app.$el)
console.log(app)
})
//Disable “development mode” warning in VueJS
Vue.config.productionTip = false
environment.js
.
.
.
environment.config.merge({
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
})
header.vue
<template>
<v-card>
<v-toolbar
color="cyan"
dark
flat
>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Page title</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
<template v-slot:extension>
<v-tabs
v-model="model"
centered
slider-color="yellow"
>
<v-tab
v-for="i in 3"
:key="i"
:href="`#tab-${i}`"
>
Item {{ i }}
</v-tab>
</v-tabs>
</template>
</v-toolbar>
<v-tabs-items v-model="model">
<v-tab-item
v-for="i in 3"
:key="i"
:value="`tab-${i}`"
>
<v-card flat>
<v-card-text v-text="text"></v-card-text>
</v-card>
</v-tab-item>
</v-tabs-items>
</v-card>
</template>
<script>
export default {
data () {
return {
model: 'tab-2',
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
}
},
}
</script>
app.vue
<template>
<div id ="app">
<Header />
<!-- <router-view/> -->
</div>
</template>
<script>
import Header from './packs/components/Header.vue'
export default {
components: {
Header
},
}
</script>
home.html.erb
<div id='hello'>
<app></app>
</div>
<%= stylesheet_pack_tag 'hello_vue' %>
<%= javascript_pack_tag 'hello_vue' %>
ブラウザにこのパーツが表示されればokです。
https://vuetifyjs.com/en/components/tabs/#tab-items