The process of introducing Vuetify to Rails

background

I thought that installing vue, vuetify would be finished soon, but it was unexpectedly difficult, so I will keep it as a memo so that the same error will not occur next time.

Premise

vue (webpack) is installed. I wrote → Introduce Vue in Rails

Method (or process)

At first, I referred to this qiita. https://qiita.com/onoblog/items/e1a94fde9ed50f451d13 After that, after loading Vuetify, check the error on the console. Vuetify parts were not loaded.

v-toolbar is not loaded.

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

This is about 6 of the same.

vue.esm.js:1937 TypeError: Cannot read property 'smAndDown' of undefined

↓ If you google, you will find this article. (Now you can see vuetify) https://stackoverflow.com/questions/58070686/cannot-read-property-t-of-undefined-using-vuetify-and-laravel/58070989

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

It is the end.

Code

hello_vue.js

// import Vue from 'vue/dist/vue.esm';
//environment.Moved to 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>

erb:home.html.erb

<div id='hello'>
<app></app>
</div>
 <%= stylesheet_pack_tag 'hello_vue' %>
 <%= javascript_pack_tag 'hello_vue' %>

If you see this part in your browser, it's ok. https://vuetifyjs.com/en/components/tabs/#tab-items