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.

スクリーンショット 2020-11-09 5.30.44.png

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.

Recommended Posts

Introduced Vuetify to an existing Rails app
Introduced Vue.js to an existing Rails app
Downgrade an existing app created with rails 5.2.4 to 5.1.6
How to push an app developed with Rails to Github
Rails6 I tried to introduce Docker to an existing application
Introduced gRPC client to rails
I want to push an app made with Rails 6 to GitHub
How to specify db when creating an app with rails
How to change app name in rails
I tried to introduce CircleCI 2.0 to Rails app
Upload Rails app image file to S3
Try deploying Rails app to EC2-Part 2 (Deploy)-
Rails6 jQuery introduced
Rails Bootstrap introduced
Create an app by specifying the Rails version
Rails6.0 ~ How to create an eco-friendly development environment
Introduced Rails6 toastr
[Rails] How to build an environment with Docker
Unify the Rails app time zone to Japan time
How to install Docker in the local environment of an existing Rails application [Rails 6 / MySQL 8]
How to make an almost static page with rails
An introductory book to read when you start Rails
App development beginners tried to make an Android calculator app
I introduced Docker to Rails 6, so I summarized it (beginner)
[Swift] Trajectory until adding WidgetKit to an existing application
How to get started with creating a Rails app
[Rails] How to display an image in the view
[Swift 5] Note: Add Core Data to an existing project
How to write Rails
Introducing CircleCI to Rails
Introducing Bootstrap to Rails 5
Introducing Bootstrap to Rails !!
Introduce Vue.js to Rails
Heroku app moving (rails)
How to uninstall Rails
[Rails] Create an application
I tried to introduce Bootstrap 4 to the Rails 6 app [for beginners]
Add an icon to the header link using Rails fontawesome
Rough procedure verbalized output when creating an app with Rails
[Rails] I tried to create a mini app with FullCalendar
What to do when you launch an application with rails
[iOS] [Objective-C] How to update a widget from an Objective-C app
Summary of initial work when creating an app with Rails
How to deploy jQuery in your Rails app using Webpacker