https://github.com/honulife/rails-turbo-vue

A Rails 7 app that can use Vue to render parts of views on the client side
https://github.com/honulife/rails-turbo-vue

islands playwright rails rails7 ruby-on-rails tailwind tailwindcss turbo turbodrive vite vue vue3 vuejs

Last synced: 10 days ago
JSON representation

A Rails 7 app that can use Vue to render parts of views on the client side

• Host: GitHub
• URL: https://github.com/honulife/rails-turbo-vue
• Owner: HonuLife
• Created: 2023-07-01T00:32:00.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-03-18T15:08:21.000Z (8 months ago)
• Last Synced: 2024-10-29T14:15:16.727Z (17 days ago)
• Topics: islands, playwright, rails, rails7, ruby-on-rails, tailwind, tailwindcss, turbo, turbodrive, vite, vue, vue3, vuejs
• Language: Ruby
• Homepage:
• Size: 2.57 MB
• Stars: 8
• Watchers: 2
• Forks: 2
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

        
[![CI](https://github.com/joekrump/rails-turbo-vue/actions/workflows/rubyonrails.yml/badge.svg)](https://github.com/joekrump/rails-turbo-vue/actions/workflows/rubyonrails.yml)

# Rails + Turbo + Vue

Render your views with Rails and then sprinkle in client-side rendered Vue components where you want them. When Vue components are used, they are dynamically imported and mounted, keeping your app's load times fast for users by keeping js bundle sizes small.

## Features

- ✅ Lazy loading of Vue components on pages where you want to use it

- ✅ TypeScript (optional) support

- ✅ [TailwindCSS](https://tailwindcss.com/)

- ✅ [Vite](https://vitejs.dev/) for frontend assets via [Vite Ruby](https://vite-ruby.netlify.app/)

- ✅ Navigation handled with [TurboDrive](https://turbo.hotwired.dev/handbook/drive)

- ✅ System tests driven by [RSpec + Capybara + Playwright](https://playwright-ruby-client.vercel.app/docs/article/api_coverage)

   - [`spec/system/pandas/index_spec.rb`](https://github.com/joekrump/rails-turbo-vue/blob/main/spec/system/pandas/index_spec.rb) can be a helpful example

   - [Ruby Playwright - Page API](https://playwright-ruby-client.vercel.app/docs/api/page)

- ✅ Custom generator for creating a view that loads a Vue component: `rails g view_with_vue index|show|edit|create ROUTE_PATH`. See [more details below](#generate-a-view-that-uses-a-view-component)

- ✅ GitHub actions workflow for running Vitest and Rspec tests

![Homepage](https://github.com/joekrump/rails-turbo-vue/blob/main/spec/expected_screenshots/expected_chromium_home_page_renders_the_home_page_with_the_expected_content_dark.png)

## Dev

### Setup

```bash

bin/setup

```

### Run app:

```bash

bin/dev

```

### Run tests:

#### Rails tests (including system/e2e tests)

```bash

rspec

```

#### Frontend (unit and component tests with Vitest)

```bash

yarn test

```

### Generate a new scaffold with and have the views styled with TailwindCSS

```bash

rails g scaffold

# Ex. rails g scaffold animal name:string species:string age_years:integer

```

### Generate a view that will mount a Vue.js component

```bash

rails generate view_with_vue index|show|edit|create ROUTE_PATH

# Ex. rails g view_with_vue edit animals/llamas will create the route /animals/llamas/:id/edit with a Vue component that loads on the view for that route.

```

## Details

### Versions of key dependencies:

- [email protected]

- [email protected]

- [email protected]

- [email protected]