Introduced Vuetify to an existing Rails app

If you want speed

Now that Vue.js is safe, Vuetify is supposed to be. Vuetify is a framework packed with nice components. Even if you don't make it from scratch, there are buttons, slides, and other cool ones. It's cool.

I immediately tried to introduce it while looking at the document. It was tough. It was all in English.

https://vuetifyjs.com/en/getting-started/installation/

Install from nothing

At first, I tried it from scratch without thinking about introducing it to existing ones. First of all, it seems that you need a Vue CLI. Let's refer to the formula.

https://cli.vuejs.org/

$ yarn global add @vue/cli

And make it with the vue command.

$ vue create my-app

Many files are created, and the following command is entered there.

$ yarn serve

This yarn serve is the original script defined in package.json. " serve ":" vue-cli-service serve ",.

When executed, Hello World will be created as follows. I did it.

A page like this was displayed. It's a success.

Put in that existing

It's a way to insert it into an existing application, but this was helpful. Rather almost this article. I started from "3. Install Vuetify" here.

[[Rails6] Build an environment for Rails + Vue + Vuetify in 10 minutes](https://qiita.com/Ryoga_aoym/items/e1d91351389904240594#3-vuetify%E3%82%92%E3%82%A4%E3 % 83% B3% E3% 82% B9% E3% 83% 88% E3% 83% BC% E3% 83% AB)

However, I got a strange error. I'm not sure what I remember at that time, but I feel that it didn't work out as it was. There was a link to the following issue in the error log.

https://github.com/vuetifyjs/vuetify/discussions/4068

"$attrs is readonly" and "$listeners is readonly" 

It was that guy.

Dealing with $ attrs is readonly "and" $ listeners is readonly

When I followed the link above, a great person gave an answer. https://github.com/vuetifyjs/vuetify/discussions/4068#discussioncomment-24984

It seems to be good to do this.

config/webpack/environment.js

//Omission
//Add the following

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

Then it was done. The button could be displayed.

You did it.

One difficulty is gone and another is difficult

Well, I was able to introduce the button safely, but I went to the one where the original characters were amazing. I have to modify the design here and there. What should I do?

Next time we look forward to.