Rails + Vue3 + TypeScriptで新しいプロジェクトを作ってみた

rbenv local 2.7.2

source 'https://rubygems.org'
gem 'rails', '6.0.3.4'

bundle install
bundle exec rails new -d postgresql --api --skip-action-mailer --skip-active-storage --skip-action-cable .
# database.ymlを編集
./bin/rails s

npm init vite-app frontend
cd frontend
nodenv local 14.15.0
npm install

const path = require('path')

export default {
    port: 8080,
    alias: {
        '/@/': path.resolve(__dirname, 'src')
    }
}

npm run dev

// tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    // this enables stricter inference for data properties on `this`
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "baseUrl": ".",
    "paths": {
      "/@/*": [
        "src/*"
      ]
    }
  }
}

npm install --global @vue/cli
vue add typescript

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3.0 + Vite" />
</template>

<script lang="ts">
import HelloWorld from './components/HelloWorld.vue'
import { defineComponent } from 'vue'

export default defineComponent({
  components: {
    HelloWorld
  }
})
</script>

bin/rails g model user

class CreateUsers < ActiveRecord::Migration[6.0]
  def change
    create_table :users do |t|
      t.string :name, null: false
      t.timestamps
    end
    add_index :users, :name, unique: true
  end
end

bin/rails g db:migrate

class UsersController < ApplicationController
  def index
    render json: User.all
  end

  def create
    user = User.new(user_params)
    if user.save
      render json: user, status: 201
    else
      render json: user.errors.full_messages, status: 400
    end
  end

  private
    def user_params
      params.require(:user).permit(:name)
    end
end

Rails.application.routes.draw do
  resources :users
end

gem 'rack-cors'

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'localhost:8080'

    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

npm install axios

import axios from 'axios'
export default axios.create({
    baseURL: 'http://localhost:3000/',
})

import dayjs, {Dayjs} from 'dayjs';


export default class User {
    id: number
    name: string
    createdAt: Dayjs
    updatedAt: Dayjs


    constructor(id: number, name: string, createdAt: string, updatedAt: string) {
        this.id = id
        this.name = name
        this.createdAt = dayjs(createdAt)
        this.updatedAt = dayjs(updatedAt)
    }
}

import axios from "/@/lib/axios"
import User from "/@/models/user"

function createUserFromResponse(res: any): User {
    return new User(res.id, res.name, res.created_at, res.updated_at)
}

export const getUsers: () => Promise<User[]> = async () => {
    const res = await axios.get('/users')
    return res.data.map((res: any) => createUserFromResponse(res))
}

export interface UserCreateParams {
    name: String
}

export const createUser: (params: UserCreateParams) => Promise<User> = async (params: UserCreateParams) => {
    const res = await axios.post('/users', {user: params})
    return createUserFromResponse(res.data)
}

<template>
  <div>
    <form>
      <label>
        name
        <input v-model="form.name" type="text"/>
      </label>
      <button @click.prevent="createUser">保存</button>
    </form>

    <table>
      <thead>
      <tr>
        <th>id</th>
        <td>name</td>
        <td>createdAt</td>
        <td>updatedAt</td>
      </tr>
      </thead>
      <tbody>
      <tr v-for="user in users" :key="user.id">
        <th>{{ user.id }}</th>
        <td>{{ user.name }}</td>
        <td>{{ user.createdAt.format() }}</td>
        <td>{{ user.updatedAt.format() }}</td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script lang="ts">
import {createUser, getUsers} from '/@/apis/users_api'
import {defineComponent} from 'vue'
import User from '/@/models/user'

export default defineComponent({
  data() {
    return {
      form: {
        name: '' as string
      },
      users: [] as User[]
    }
  },
  methods: {
    async createUser() {
      const user = await createUser(this.form)
      this.users.push(user)
      this.form.name = ''
    }
  },
  async created() {
    this.users = await getUsers()
  }
})
</script>