Introduction

Vue.js implements the ability to open and close menus when clicked.

This article is an introduction to Vue.js in rails6. Also, since rails6 comes standard with webpacker, we will omit it here.

Introducing Vue.js
Install Vew
Specify where to read the file
Error resolution

Development environment

Vue 2.6.12 rails 6.0.0 ruby 2.6.5

Implementation

Let's implement it ~

1. Vew introduction

1.1 Installing Vew

First, install Vue.

`Terminal`


rails webpacker:install:vue

スクリーンショット 2020-12-15 16.37.11.png

hello_vue.js' and app.vue are automatically generated.

Next, add it so that it will be loaded in application.html.erb.

`app/views/layouts/html.erb`


<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>

    <%↓ Add the following two lines%>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>← ① Add this
    <%= javascript_pack_tag 'hello_vue' %>← ② Add this

  </body>
</html>

① is for reading Vue.js, and ② is for reading a file called hello_vue. Both are added in the body.

Then it will be displayed as below.

スクリーンショット 2020-12-15 16.36.36.png You can now use Vew.js for the time being.

1.2 Specify where to read the file

Since it is a dead as it is, we will make it possible to handle it with a separate new file.

`app/views/layouts/html.erb`



<%= javascript_pack_tag 'hello_vue' %>
//Changed to below
<%= javascript_pack_tag 'menu_vue' %>

Officially, it is specified to read hello_vue, but change it to the file name menu_vue to be created.

Create a new file with the name'menu_vue'.

`app/javascript/packs/menu_vue`


var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!' //← Converted to Japanese because the difference is difficult to understand
  }
})

`html:app/views/menus/index.html.erb`


<h1>Menus#index</h1>
<p>Find me in app/views/menus/index.html.erb</p>

<%Add the following%>
  <div id="app">
    <p>{{ message }}</p>
  </div>

スクリーンショット 2020-12-16 5.59.29.png it is complete! !!

This is the introduction. The continuation implements the part that creates the menu.

[Veu.js] Implementation of menu function Implementation version rails6 https://qiita.com/AKI3/items/cd1729a25c9bb83061b9

Error handling

Webpacker::Manifest::MissingEntryError

If you get this error, the hierarchy is often different, so you need to be careful when creating a new file. The location is under packs. スクリーンショット 2020-12-16 9.50.14.png

If that doesn't work, there may be a problem with yarn or webpacker. Please also refer to the following article. https://qiita.com/masatwork/items/1b5d190cc76f5eeffbb7 https://qiita.com/NaokiIshimura/items/8203f74f8dfd5f6b87a0