Introduced Vue.js to an existing Rails app

Vue.js seems to be cool

I wanted to be cool. I wanted to make the site under personal development cool. I wanted to make it a Guin and a Baban. I decided to introduce Vue.js.

I don't know the principle of his operation yet, but I decided to go because the learning cost is low and the documentation seems to be substantial.

Introduction of webpacker and yarn

First of all, it seems that webpacker and yarn are necessary.

A webpacker is a module bundler that has the role of combining multiple javascripts into one. I'm not sure what that is. However, if you get stuck here, you can't do that cool with Vue.js. Postponed.

It seems that yarn is a package manager. It seems to be an enhanced version of npm. It seems to make it easier to add and manage libraries. Really.

Both were already in place in my Rails app. The Gemfile had the following description.

gem "webpacker", "~> 4.x"

yarn was already installed. I checked the version and there was no problem.

$ yarn -v

Creating an initial Vue file

If you execute the following command in the terminal, the files required for vue will be created.

$ bundle exec rails webpacker:install:vue

Made in various ways.

Described in view file

Add the following description to application.html.erb.

erb:view/layouts/application.html.erb


 <!--Abbreviation-->
 <body>
  <%= javascript_pack_tag 'hello_vue' %>
  <%= stylesheet_pack_tag 'hello_vue'  %> 
<!--Abbreviation-->

When you do this, "Hello View!" Will be displayed at the bottom of the top page. If it can be displayed, it is successful. You did it.

What to look into Vue.js

It seems that you can load app / javascript / packs / hello_vue.js by using javascript_pack_tag. This hello_vue.js refers to app / javascript / app.vue. Let's take a look.

app/javascript/app.vue


<template>
  <div id="app">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      message: "Hello Vue!"
    }
  }
}
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

It's a CSS-like description, so you can read it without much resistance. Apparently, "Hello Vue!" Is included in the {{message}} in the template. When I tried changing the character string, it became like that.

This seems to be called data binding. It's cool.

Create your own Vue file

I can't do Hello World forever, so let's play with it more. I want to create a Vue file myself. Before that, read the previous hello_vue.js. There should be a lot of comments.

app/javascript/packs/hello_vue.js


//Variously written

// The above code uses Vue without the compiler, which means you cannot
// use Vue to target elements in your existing html templates. You would
// need to always use single file components.
// To be able to target elements in your existing html/erb templates,
// comment out the above code and uncomment the below
// Add <%= javascript_pack_tag 'hello_vue' %> to your layout
// Then add this markup to your html template:

// <div id='hello'>
//   {{message}}
//   <app></app>
// </div>

//Code below

It's a little troublesome, so let's translate it into Japanese.

//The code at the top is used when using Vue without a compiler. This is an existing html template
//On the other hand, it's used when you can't mess with Vue.
//Yes, this is always a single component.

//If you want to add some code to your existing html, comment out the code.
//And in html<%= javascript_pack_tag 'hello_vue' %>Add.
//After that, embed the following div tag.

I understand a little. That's why let's comment out the code at the top and comment out the code at the bottom.

import Vue from 'vue/dist/vue.esm'
import App from '../app.vue'

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    el: '#hello',
    data: {
      message: "Can you say hello?"
    },
    components: { App }
  })
})

This should come out. After that, let's add the description to application.html.erb.

 <body>
 <!--Abbreviation-->
    <div id="hello">
      <p>{{ message }}</p>
    </div>
 <!--Abbreviation-->

This will change "Hello Vue!" To "Can you say hello?".

Somehow I got it. After that, copy the file and create your own Vue file. Copy app / javascript / packs / hello_vue.js from earlier (no comment part required) and create a new file called app / javascript / packs / custom_vue.js. Make some corrections.

app/javascript/packs/custom_vue.js


import Vue from 'vue/dist/vue.esm'
import App from '../app.vue'

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    el: '#hello2',
    data: {
      message: "Can you hear me This is vue.It's js. Not writing html"
    },
    components: { App }
  })
})

After that, change a part of the description of application.html.erb.

<%= javascript_pack_tag 'custom_vue' %> <!--← Add-->
<%= javascript_pack_tag 'hello_vue' %>
<%= stylesheet_pack_tag 'hello_vue' %>

<!--Abbreviation-->
    <div id="hello">
      <p>{{ message }}</p>
    </div>
    <!--Add ↓-->
    <div id="hello2">
      <p>{{ message }}</p>
    </div> 
<!--Abbreviation-->

It will be like this.

It's done! !! !! !!

in conclusion

Vue.js is fun. I'm not sure, but it should be fun. This is because it is easy to understand because the appearance changes drastically. I will continue to post the progress of personal development and introduce the places where I got stuck.

Thank you for your support!

reference

https://github.com/rails/webpacker/blob/master/docs/integrations.md#vue

Teaching materials for take off rails https://freelance.cat-algorithm.com/lp/take-off-rails

Recommended Posts

Introduced Vue.js to an existing Rails app
Introduced Vuetify to an existing Rails app
Downgrade an existing app created with rails 5.2.4 to 5.1.6
Introduce Vue.js to Rails
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
I want to make an ios.android app
Migrate existing Rails 6 apps to Docker environment
Upload Rails app image file to S3
Try deploying Rails app to EC2-Part 2 (Deploy)-
How to use credentials.yml.enc introduced in Rails 5.2
Rails6 jQuery introduced
Rails Bootstrap introduced
The story of making an electronic New Year's card app with Vue.js + Rails
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 !!
Heroku app moving (rails)
Vue.js + Jersey desktop app
How to uninstall Rails
[Rails] Create an application
I tried to introduce Bootstrap 4 to the Rails 6 app [for beginners]
How to connect a container created later to an existing network
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
Summary of initial work when creating an app with Rails
How to deploy jQuery in your Rails app using Webpacker
How to make an app using Tensorflow with Android Studio
Confirm public key ~ Register key on Github ~ Push Rails app to Github