The process of introducing Vuetify to Rails


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.


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

Method (or process)

At first, I referred to this qiita. 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)

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

It is the end.



// 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'

// const vuetify = new Vuetify(); 

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    // vuetify,
    vuetify: new Vuetify(),
    el: '#hello',
    render: h => h(App)


//Disable “development mode” warning in VueJS
Vue.config.productionTip = false


    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm.js'



      <v-toolbar-title>Page title</v-toolbar-title>


      <v-btn icon>

      <v-btn icon>

      <template v-slot:extension>
            v-for="i in 3"
            Item {{ i }}

    <v-tabs-items v-model="model">
        v-for="i in 3"
        <v-card flat>
          <v-card-text v-text="text"></v-card-text>
  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.',


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


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

If you see this part in your browser, it's ok.

Recommended Posts

The process of introducing Vuetify to Rails
Introducing CircleCI to Rails
Introducing Bootstrap to Rails 5
Introducing Bootstrap to Rails !!
[Rails] Button to return to the top of the page
The story of introducing Ajax communication to ruby
[Rails] How to change the column name of the table
[Rails] How to get the contents of strong parameters
Let's summarize how to extend the expiration date of Rails
[Rails] How to display the list of posts by category
[Rails] Where to be careful in the description of validation
[Rails] Check the contents of the object
Introducing full calendar to Rails application
Explanation of the order of rails routes
[Java] Input to stdin of Process
Check the migration status of rails
Introducing React to Rails with react-rails
[Rails] Talk about paying attention to the return value of where
[Rails] How to change the page title of the browser for each page
[Rails] Read the RSS of the site and return the contents to the front
I examined the concept of the process to understand how Docker works
From pulling docker-image of rails to launching
The secret to the success of IntelliJ IDEA
The identity of params [: id] in rails
Introducing the features of JavaFX SceneBuilder container
[Rails] How to use the map method
part of the syntax of ruby ​​on rails
The process of understanding Gemfile by non-engineers
How to determine the number of parallels
[Rails 6] Introducing Google Maps to your portfolio
[Rails] Change the label name of f.label
How to sort the List of SelectItem
Output of the book "Introduction to Java"
Introduced Vuetify to an existing Rails app
[Rails] About the error when displaying the screen due to the autofocus of the form
Strict_loading function to suppress the occurrence of N + 1 problem added from rails 6.1
[CircleCI] I was addicted to the automatic test of CircleCI (rails + mysql) [Memo]
How to solve the local environment construction of Ruby on Rails (MAC)!
[Rails] The cause of not being able to post was in form_with
[Ruby On Rails] How to search the contents of params using include?
[Rails] Articles for beginners to organize and understand the flow of form_with
How to make the schema of the URL generated by Rails URL helper https
[Rails] How to solve the time lag of created_at after save method
Change the save destination of the image to S3 in the Rails app. Part 2
[Rails] How to decide the destination by "rails routes"
[Solution] Webpacker error when introducing Vuetify to Rails6 "ActionView :: Template :: Error Webpacker can't find hello_vue ~"
[Order method] Set the order of data in Rails
How to find the cause of the Ruby error
[Ruby on Rails] How to make the link destination part of the specified id
[Rails] Introduction of pry-rails ~ How to debug binding.pry
The road to Japaneseizing Rails devise error messages
Add empty data to the top of the list
Customize how to divide the contents of Recyclerview
[Rails] I tried to raise the Rails version from 5.0 to 5.2
Make a margin to the left of the TextField
I tried to organize the session in Rails
[Rails] Introducing jquery
Introducing New Relic to Rails apps on Heroku
[Ruby on Rails] Rails tutorial Chapter 14 Summary of how to implement the status feed
Procedure for introducing Docker into the development environment of existing Rails applications [Rails, MySQL, Docker]
The story of raising Spring Boot 1.5 series to 2.1 series