RailsにVuetifyを導入したプロセス

##　背景
vue, vuetifyをインストールするぐらいならすぐ終わるだろうと思ってましたが、意外と手こずったので、次に同じエラーを起こさないように、備忘録として残しておきます。

## 前提
vue(webpack)がインストールされている。
書きました→[Rails内にVueを導入](https://qiita.com/kazumawada/items/fd1f352c58a938d69de4)

## 方法(というかプロセス)
最初はこのqiitaを参考にしました。
https://qiita.com/onoblog/items/e1a94fde9ed50f451d13
その後、Vuetifyを読み込んだら、コンソールでエラー確認。Vuetifyのパーツが読み込まれていなかった。

v-toolbarが読み込まれてない。

```vue
Vue warn]: Error in render: "TypeError: Cannot read property 'smAndDown' of undefined"
```

これが同じの6こくらい。


```vue

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

```vue
new Vue({
  el: '#app',
  vuetify: new Vuetify()
})
```

終わりです。

## 一応コード

```javascript: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
```

```javascript:environment.js
.
.
.
environment.config.merge({
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm.js'
      }
    }
  })
```


```vue: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>
```

```vue:app.vue
<template>
    <div id ="app"> 
      <Header />
      <!-- <router-view/> -->
     </div>
</template>
<script>
import Header from './packs/components/Header.vue'
export default {
  components: {
     Header
  },
}
</script>
```

```erb: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