Playground
opal-viteのサンプルアプリケーションを実際に試すことができます。
Live Demos
Practical App
フル機能のTodoアプリケーション。CRUD操作、モーダル、トースト通知、LocalStorage永続化など。
Chart App
Chart.jsを使用したチャート可視化のサンプル。
Stimulus App
Stimulusコントローラーの基本的な使い方を示すサンプル。
API Example
外部APIとの連携パターンを示すサンプル。
Form Validation App
リアルタイムフォームバリデーションのサンプル。
i18n App
多言語対応（国際化）のサンプル。
PWA App
Progressive Web Appのサンプル。オフライン対応。
Turbo App
Hotwire Turboとの統合サンプル。
Vue App
Vue.js 3との統合サンプル。Rubyでロジックを記述。
React App
Reactとの統合サンプル。Rubyでロジックを記述。
Snabberb App
Snabberb SPAフレームワークのサンプル。仮想DOMを使用したカウンターとTodoアプリ。
Utilities App
URIHelpers、Base64Helpersなどのユーティリティモジュールのデモ。
Debug App
DebugHelpersモジュールのデモ。コンソールログ、パフォーマンス計測、アサーションなど。
ActionCable App (Railway)
ActionCableHelpersを使用したリアルタイムチャットのデモ。WebSocket通信、タイピングインジケーター、オンラインプレゼンス。
Chat App (Railway)
WebSocketを使用したリアルタイムチャットアプリ。複数ユーザー対応。
Rails App (Railway)
Rails + Opal + Viteの統合サンプル。サーバーサイドRailsとクライアントサイドOpalの連携。
Source Code
各サンプルのソースコードはGitHubリポジトリで確認できます：
- practical-app
- chart-app
- stimulus-app
- api-example
- form-validation-app
- i18n-app
- pwa-app
- turbo-app
- vue-app
- react-app
- snabberb-app
- utilities-app
- debug-app
- actioncable-app
- chat-app
- rails-app
Run Locally
ローカル環境で実行する場合：
bash
git clone https://github.com/stofu1234/opal-vite.git
cd opal-vite/examples/practical-app
pnpm install && bundle install
pnpm dev