Here is an example how you can import a JavaScript library to your Vue component when using importmaps in Ruby on Rails

Step 1 - Pin the library in importmaps

Pin your libaray in config/importmaps.rb

pin "axios", to: "https://cdn.skypack.dev/pin/axios@v1.6.7-CtiTWk1RHZKnFCXj0sDG/mode=imports,min/optimized/axios.js", preload: true

Step 2 - Reference the library in your component

// app/javascript/components/HelloWorld.js
import axios from "axios"

const HelloWorld = {
  template: `
    <div>
      <h1></h1>
    </div>
  `,
  data() {
    return {
      message: 'Loading...'
    };
  },
	methods: {
    async fetchData() {
      try {
        const response = await axios.get('https://pokeapi.co/api/v2/pokemon/ditto');
        console.log(response);
        this.message = response.data.name
        // Update your component's data with the fetched data
      } catch (error) {
        console.error('There was an error fetching the data:', error);
        this.message = error
      }
    }
  },
	mounted() {
	  this.fetchData();
	},      
}

export default HelloWorld;

Step 1 - Pin Vue to your project

in config/importmap.rb add the following line

pin "vue", to: "https://ga.jspm.io/npm:vue@3.2.26/dist/vue.esm-browser.js", preload: true

Step 2 - Initialize Vue app

create app/javascript/vue.js

import * as Vue from "vue"
import HelloWorld from "./components/HelloWorld"

document.addEventListener("DOMContentLoaded", () => {
  const element = document.querySelector("#app");
  if (element !== null) {
    const app = Vue.createApp({});
    
    // register your components
    app.component('hello-world', HelloWorld);

    app.mount("#app");
  }
});

Step 3 - Import Vue.js in application.js

in app/javascript/application.js add the following line

import "./vue"

Step 4 - Create components folder

create app/javascript/components

Then add your Vue component app/javascript/components/HelloWorld.js

const HelloWorld = {
  template: `
    <div>
      <h1></h1>
    </div>
  `,
  data() {
    return {
      message: 'Hello, Vue!'
    };
  }
}

export default HelloWorld;

Step 5 - Add to component to view

in home/index.html.erb

<div id="app">
  <hello-world></hello-world>
</div>

Use namespace when you want to group routes under a common module (which will also affect the URL and helper methods). Use scope when you need more flexibility in terms of paths and controller organization, allowing you to keep the controller in the global namespace or in a different module than the URL might imply. The scope is often used when the URL structure doesn’t neatly map to the controller structure, which can sometimes be the case with APIs or user-facing URLs that need to be more SEO-friendly.

resources :posts do
	scope module: :posts do
		resources :publishes, only: :create
	end
end

# app/controllers/posts/publishes_controller.rb
class Posts::PublishesController < ApplicationController
	def create
		
	end
end

Prefix         Verb   URI Pattern          Controller#Action
post_publishes POST   /posts/:post_id/publishes(.:format)     posts/publishes#create

If we were to use namespace, it could look something like this.

namespace :posts do
	post `publishes/create`
end

I am working on a new Ruby on Rails project with a friend. We bumped into a few development blockers that I have never experienced before. It turns out that if you are using an outdated version on npm, the pacakage.json which gets generated when you create a new Rails application will not include the necessary scripts needed in order to get ./bin/dev working.

Assuming your Ruby on Rails application is using cssbundling and jsbundling–if you see any build errors when trying to run the server with ./bin/dev you may want to try the following:

• First update your node version to a newer stable version. I set mine to 18.17.1. I use asdf to manage ruby and nodejs versions. asdf local nodejs 18.17.1
• Then update your npm version. I am using version 8.19.4. npm install -g npm@8.19.4
• re-install cssbundling rails css:install:bootstrap
• re-install jsbundling rails javascript:install:esbuild

In package.json, check to see if the scripts key includes five items for the value. Your Procfile.dev should look like the following:

web: env RUBY_DEBUG_OPEN=true bin/rails server
js: yarn build --watch
css: yarn watch:css

After updating npm and node version, yarn commands should work and you should be able to run the server with ./bin/dev.

If you are managing an application that has a staging version, you will need to point default_url_options[:host] to the correct host domain. If not, features that depend on host domains(i.e. uploading to cloudinary or sending out an email from your application)will not work.

# application_controller.rb
def set_default_url_option
  if ENV["HOST"]
    {host: ENV["HOST"]}
  elsif Rails.env.production?
    {host: 'https://app-name.com'}
  else
    {:host => "localhost", :port => "3000"}
  end
end

Set env variable in your staging app

heroku config:set --app app_name_staging HOST="https://staging.app-name.com"