Challenge the settings for developing with vue.js on Rails 6

I am trying to develop using Rails x Vue.js. Since I'm groping, there may be some mistakes, but I searched for it myself. I hope you can read it as such an article.


① Introduce npm (OK in home directory)

brew install npm

② Introduce the npm package to the app (in the app directory)

npm init

This will launch an interactive prompt, prompting you for some input. The value in parentheses is the value prepared by default by the npm command.

package name: (a) sample
version: (1.0.0) 0.0.0
entry point: (index.js)
test command:
git repository:
license: (ISC)

name… The name of the package. It is used when importing or requiring in the source code.

version ... It's the first time, so answer 1.0.0 or 0.0.0. You need to change the version every time you update

description… Package description. If you do not enter anything, it will be displayed as follows

"description": "This README would normally document whatever steps are necessary to get the application up and running.",

I wrote the explanation for using the app in the README, so please take a look.

main… The first script file called in the module. The first file to be called when a package is required. This time it was main.js.

test command… A setting that allows you to execute source code using commands. If you press enter without entering anything

"test": "echo \"Error: no test specified\" && exit 1"

A value like this is saved.

this is

npm test

It means that the output below echo will be output for the command. When you actually run it

% npm test

>app [email protected] test 
> echo "Error: no test specified" &&exit 1 here

Error: no test specified
npm ERR! Test failed.  See above for more details.

The echo part is output like this.

repository… Specify the git repository to be linked. If .git exists, the url of the currently linked git repository will be entered without permission even if you do not enter it.

author… The author of the package.

license… Package rights information. The standard is ISC, so I followed it.

Finally, the following package.json was created, including the ones that were not entered in the interactive shell.

  "name":app name,
  "private": true, (True if you don't want to publish)
  "dependencies": {
    "@rails/actioncable": "^6.0.0-alpha",
    "@rails/activestorage": "^6.0.0-alpha",
    "@rails/ujs": "^6.0.0-alpha",
    "@rails/webpacker": "4.3.0",
    "turbolinks": "^5.2.0",
    "vue": "^2.6.12"
  "version": "0.1.0",
  "devDependencies": {
    "vue-loader": "^15.9.6",
    "webpack": "^5.11.1",
    "webpack-dev-server": "^3.11.1"
  "description": "This README would normally document whatever steps are necessary to get the application up and running.",
  "main": "main.js", (Source code that is called first when you call a package)
  "directories": {
    "lib": "lib",
    "test": "test"
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  "repository": {
    "type": "git",
    "url":Linked git repository
  "author":Author set by myself,
  "license": "ISC",
  "bugs": {
    "url":Repository issue
  "homepage":Repository name readme

③ Introduced webpack and vue-loader

#Local installation
npm install webpack vue-loader  --save-dev
npm install vue --save

#Global installation
npm install webpack -g 

If you install these, a lot of modules of node.js will be installed in the node_modules folder, but these will be loaded without permission because the dependency is described in package.json. So you don't have to push to git.

So play with gitignore



This will prevent node_modules from being pushed to git.


Introduction of development using vue.js

Why include node_modules in gitignore

Contents of package.json

The one I referred to because permission was denied by the npm command

What is vue-loader

[What to do next]

Fixed fine settings in package.json

Recommended Posts

Challenge the settings for developing with vue.js on Rails 6
Preparation for developing with Rails
Validation settings for Ruby on Rails login function
Publish the app made with ruby on rails
[Rails] Procedure for linking databases with Ruby On Rails
Determine the current page with Ruby on Rails
Solve the N + 1 problem with Ruby on Rails: acts-as-taggable-on
[Rails] Settings for loading web fonts in CloudFront on Heroku
Understand code coverage with Rspec, the Ruby on Rails test framework
Build environment with vue.js + rails + docker
Programming with ruby (on the way)
Understanding REST will improve the outlook for Ruby on Rails tutorials
Check the root on the Rails browser
Build debug environment on container --Build local development environment for Rails tutorial with Docker-
Tutorial 1 for building apps with Rails (First steps to Yay! You're on Rails!)
[Ruby on Rails] Create a pie chart for each column with Chartkick
Ruby on Rails DB Tips for creating methods to reduce the load
[Ruby on Rails] View test with RSpec
Rails: 7 basic actions defined on the controller
Change the default timezone for the rails app
[Ruby on Rails] About bundler (for beginners)
part of the syntax of ruby ​​on rails
Prepare the format environment with "Rails" (VScode)
Notes on using FCM with Ruby on Rails
[Ruby on Rails] Controller test with RSpec
Check the processing contents with [rails] binding.pry
[Ruby on Rails] Model test with RSpec
Explanation of Ruby on rails for beginners ①
Using Material Design for Bootstrap with Rails 5.2
The story of making an electronic New Year's card app with Vue.js + Rails
Perform SSL encryption settings in accordance with the "TLS encryption setting guidelines" on CentOS8
[Rails] When transitioning to a page with link_to, move to the specified location on the page
Using templates on the classpath with Apache Velocity
I rewrote the Rails tutorial test with RSpec
Use JDBC Manager with the settings in jdbc.dicon.
[Ruby on Rails] Until the introduction of RSpec
Come out with a suffix on the method
Introducing Rspec with Ruby on Rails x Docker
Specify the timeout for each path with Rack :: Timeout
When the Ruby on Rails terminal rolls back
[Ruby on Rails] Select2 introduction memo for Webpacker
Tips for using the Spotify app on Ubuntu
Notes on building Rails6 / PostgreSQL with Docker Compose
Matches annotations on the interface with Spring AOP
I summarized the naming conventions for each Rails
Implement the Like feature in Ajax with Rails.
[Rails] Building an environment for developing web applications
Recipe for deploying Rails apps on AWS EC2
[Ruby on Rails] Upload multiple images with refile
Try to summarize the common layout with rails
I made a portfolio with Ruby On Rails
[SPA development with Rails x Vue] Learn the basics of Vue.js (Overview of vue.js, template syntax)
[Ruby On Rails] How to use simple_format to display the entered text with line breaks
Now that you have deployed AWS with Rails On Docker, let's organize the contents.
[Rails / Uniqueness constraint] How to check model validation on the console / Uniqueness constraint for multiple columns
I want to hit the API with Rails on multiple docker-composes set up locally