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

[RUBY] Introduced Vue.js to an existing Rails app