Link Search Menu Expand Document

Generators

The generator accepts a component name and a list of arguments.

To create an ExampleComponent with title and content attributes:

bin/rails generate component Example title content

      create  app/components/example_component.rb
      invoke  test_unit
      create    test/components/example_component_test.rb
      invoke  erb
      create    app/components/example_component.html.erb

Options

Generated ViewComponents are added to app/components by default. Set config.view_component.view_component_path to use a different path.

Override template engine

ViewComponent includes template generators for the erb, haml, and slim template engines and will default to the template engine specified in config.generators.template_engine.

bin/rails generate component Example title --template-engine slim

      create  app/components/example_component.rb
      invoke  test_unit
      create    test/components/example_component_test.rb
      invoke  slim
      create    app/components/example_component.html.slim

Override test framework

By default, config.generators.test_framework is used.

bin/rails generate component Example title --test-framework rspec

      create  app/components/example_component.rb
      invoke  rspec
      create    spec/components/example_component_spec.rb
      invoke  erb
      create    app/components/example_component.html.erb

Generate a preview

bin/rails generate component Example title --preview

      create  app/components/example_component.rb
      invoke  test_unit
      create    test/components/example_component_test.rb
      invoke  preview
      create    test/components/previews/example_component_preview.rb
      invoke  erb
      create    app/components/example_component.html.erb

Generate a Stimulus controller

bin/rails generate component Example title --stimulus

      create  app/components/example_component.rb
      invoke  test_unit
      create    test/components/example_component_test.rb
      invoke  stimulus
      create    test/components/example_component_controller.js
      invoke  erb
      create    app/components/example_component.html.erb

To always generate a Stimulus controller, set config.view_component.generate_stimulus_controller = true.

Place the view in a sidecar directory

bin/rails generate component Example title --sidecar

      create  app/components/example_component.rb
      invoke  test_unit
      create    test/components/example_component_test.rb
      invoke  erb
      create    app/components/example_component/example_component.html.erb

Use inline rendering (no template file)

bin/rails generate component Example title --inline

      create  app/components/example_component.rb
      invoke  test_unit
      create    test/components/example_component_test.rb
      invoke  erb

Specify the parent class

By default, ApplicationComponent is used if defined, ViewComponent::Base otherwise.

bin/rails generate component Example title content --parent MyBaseComponent

      create  app/components/example_component.rb
      invoke  test_unit
      create    test/components/example_component_test.rb
      invoke  erb
      create    app/components/example_component.html.erb

To always use your own parent class, set config.view_component.component_parent_class = "MyBaseComponent".

Skip collision check

The generator prevents naming collisions with existing components. To skip this check and force the generator to run, use the --skip-collision-check or --force option.