· rails vue

Creating a Generator in Rails for Vue files

When learning Rails we all learn about generators. I still remember when I saw it for the first time. I just fell in love with it. Writing a single command can create useful files and directories for me. Until recently I never had a chance to create a generator. Yesterday I did a blog on using Vue.js with Rails and I saw that I had to create a few files every time I wanted to add Vue to a view. So I went ahead and created a generator that will create all the files and folder structure for us. Here is how it is done.

Generate the Generator

Rails has a generator to generate a generators . That was difficult. ;)

rails generate generator vue

This will create a file structure like this.

└── vue
    ├── templates
    │   ├── html.erb
    │   ├── javascript.erb
    │   └── vue.erb
    ├── USAGE
    └── vue_generator.rb

Let’s know what each file is about.

Vue Generator Source Code

Here is how our USAGE file looks like.

Here is how running the help command will look like.

aks:shareito$ rails g vue --help
Running via Spring preloader in process 12007
  rails generate vue NAME [options]

  [--skip-namespace], [--no-skip-namespace]  # Skip namespace (affects only isolated applications)

Runtime options:
  -f, [--force]                    # Overwrite files that already exist
  -p, [--pretend], [--no-pretend]  # Run but do not make any changes
  -q, [--quiet], [--no-quiet]      # Suppress status output
  -s, [--skip], [--no-skip]        # Skip files that already exist

    Create Vue files corresponding to the Rails views

    rails generate vue [namespace]/[controller]/action

    This will create:

Here is our vue_generator.rb file.

All the templates below are ERB files which allow us to use methods and variable to create custom content.

That is all the thing required to create a generator in Rails. Let’s see an example and what files are generated.

aks:shareito$ rails g vue  posts/index
Running via Spring preloader in process 12848
      create  app/javascript/packs/posts/index.js
      create  app/javascript/views/posts/index.vue
      create  app/views/posts/index.html.erb

as we can see the specified three files have been generated. Let’s checkout their content.

And all these files are created perfectly namespaced for us.


I hope it was fun reading this article. If you have any suggestions do let me know in the comments below. I would love to take up the next challenge and put this generator into a gem. Let’s see how that goes. Thanks for reading. :)

  • LinkedIn
  • Tumblr
  • Reddit
  • Google+