codesnips

spa

erb 
<nav id="main-navbar"
     data-turbo-permanent
     data-controller="navbar"
     data-navbar-menu-open-value="false"
     class="navbar">
  <div class="navbar-inner">

Keep navbar state across Turbo navigations with data-turbo-permanent

rails hotwire turbo
by codesnips 3 tabs
erb 
<div class="layout" data-controller="sidebar">
  <aside class="sidebar">
    <%= render "shared/sidebar", active: params[:controller] %>
  </aside>

  <main class="content-area">

Scoped navigation inside a sidebar with Turbo Frames

rails hotwire turbo
by codesnips 4 tabs
ruby 
class ProductsController < ApplicationController
  PER_PAGE = 24

  def index
    @page = [params[:page].to_i, 1].max
    @sort = %w[name price recent].include?(params[:sort]) ? params[:sort] : "recent"

Use data-turbo-action to control history (advance vs replace)

rails hotwire turbo
by codesnips 3 tabs
vue 
<template>
  <form @submit.prevent="form.post(route('posts.store'))">
    <div>
      <label>Title</label>
      <input v-model="form.title" type="text" />
      <div v-if="form.errors.title">{{ form.errors.title }}</div>

Laravel Inertia.js for modern SPAs

laravel inertia spa
by Carlos Mendez 3 tabs
javascript 
import { createContext, useContext, useEffect, useMemo, useState } from 'react';
import { fetchCurrentUser, postLogin, postLogout } from './api';

const AuthContext = createContext(null);

export function AuthProvider({ children }) {

Protecting React Routes with an Auth Context and a RequireAuth Wrapper

react react-router authentication
by codesnips 4 tabs
ruby 
class CommentsController < ApplicationController
  before_action :set_post

  def create
    @comment = @post.comments.build(comment_params)

Turbo Streams fallback to HTML for older clients

rails hotwire turbo-streams
by codesnips 4 tabs
ruby 
# Controller responding with Turbo Stream
class PostsController < ApplicationController
  def create
    @post = Post.new(post_params)

    if @post.save

Hotwire Turbo for SPA-like user experiences

ruby rails hotwire
by Sarah Mitchell 3 tabs
erb 
<div class="settings-layout">
  <nav class="settings-sidebar">
    <h2>Settings</h2>
    <ul>
      <% settings_sections.each do |section| %>
        <li class="<%= "active" if current_page?(section.path) %>">

Turbo Frames: scoped navigation inside a sidebar

rails turbo hotwire
by codesnips 3 tabs
javascript 
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static values = { keymap: Object }

  connect() {

Stimulus: keyboard shortcuts that work with Turbo navigation

rails stimulus hotwire
by codesnips 3 tabs
erb 
<!DOCTYPE html>
<html>
  <head>
    <title><%= content_for(:title) || "App" %></title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

Disable Turbo Drive on external links

rails hotwire turbo
by codesnips 3 tabs
javascript 
import { Turbo } from "@hotwired/turbo-rails"

Turbo.StreamActions.redirect = function () {
  const url = this.getAttribute("url")
  if (!url) return

Turbo Streams: server-driven redirect (Turbo Native friendly)

rails hotwire turbo-streams
by codesnips 4 tabs
javascript 
let installed = false;

function notify(message, level = "error") {
  document.dispatchEvent(
    new CustomEvent("flash:show", { detail: { message, level } })
  );

Turbo Drive lifecycle: attach global error handler

rails turbo hotwire
by codesnips 3 tabs