[Vue.js] Implementation of menu function Vue.js introduction rails6

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.

table of contents

  1. Introducing Vue.js
  2. Install Vew
  3. Specify where to read the file
  4. 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

Finally

I am a beginner in programming, but I am posting an article in the hope that it will help people who are similarly troubled.

See you next time ~

reference

【official】 https://jp.vuejs.org/v2/guide/

https://www.petitmonte.com/ruby/rails-vuejs-project.html

https://off.tokyo/blog/%E6%97%A2%E3%81%AB%E5%8B%95%E3%81%84%E3%81%A6%E3%82%8Brails%E3%81%ABvue-js%E3%82%92%E5%B0%8E%E5%85%A5%E3%81%99%E3%82%8B/

Recommended Posts

[Vue.js] Implementation of menu function Vue.js introduction rails6
[Vue.js] Implementation of menu function Implementation version rails6
[Rails 6] Implementation of search function
[Rails] Implementation of category function
[Rails] Implementation of tutorial function
[Rails] Implementation of like function
[Rails] Implementation of CSV import function
[Rails] Asynchronous implementation of like function
[Rails] Implementation of image preview function
[Rails] About implementation of like function
[Rails] Implementation of user withdrawal function
[Rails] Implementation of CSV export function
Rails [For beginners] Implementation of comment function
[Rails 6] Implementation of SNS (Twitter) sharing function
[Rails] Introduction of PAY.JP
Implementation of search function
Rails search function implementation
Implementation of pagination function
[Rails] Implementation of search function using gem's ransack
Implementation of Ruby on Rails login function (Session)
[Rails 6] Implementation of inquiry function using Action Mailer
[Rails] Implementation of image enlargement function using lightbox2
[Rails] Implementation of retweet function in SNS application
Ruby on Rails <2021> Implementation of simple login function (form_with)
Rails implementation of ajax removal
Rails fuzzy search function implementation
[Rails] Introduction of devise Basics
[Rails] Implementation of drag and drop function (with effect)
Implementation of Ruby on Rails login function (devise edition)
Implementation of sequential search function
Implementation of like function (Ajax)
Implementation of image preview function
[Ruby on Rails] Implementation of tagging function/tag filtering function
[Rails] Implementation of multi-layer category function using ancestry "Preparation"
[Rails] Implementation of multi-layer category function using ancestry "seed"
Implementation of category pull-down function
Login function implementation with rails
[Rails] Implementation of SNS authentication (Twitter, Facebook, Google) function
[Rails 6] Pagination function implementation (kaminari)
[Rails] Implementation of multi-layer category function using ancestry "Editing form"
[Rails] Implementation of multi-layer category function using ancestry "Creation form"
Rails sorting function implementation (displayed in order of number of like)
[Rails] Implementation of tagging function using intermediate table (without Gem)
[Rails] Implementation of user logic deletion
[Rails] Introduction of Rubocop by beginners
Kaminari --Added pagination function of Rails
[Rails] gem ancestry category function implementation
[Ruby on Rails] Comment function implementation
[Rails 6] Like function (synchronous → asynchronous) implementation
[Rails] Comment function implementation procedure memo
Implementation of like function in Java
[Rails] Implementation of new registration function in wizard format using devise
[Rails 6] Implementation of new registration function by SNS authentication (Facebook, Google)
[Rails] Implementation of coupon function (with automatic deletion function using batch processing)
[Ruby on Rails] Introduction of initial data
[Rails] Addition of Ruby On Rails comment function
Implementation of user authentication function using devise (2)
Rails Addition of easy and easy login function
[Ruby on Rails] Follow function implementation: Bidirectional
Rails Basic CRUD function implementation procedure scaffold
Implementation of user authentication function using devise (3)