This is a template of an app with a setup that allows Svelte components to be used in combination with ERB templates to render views.
This also includes:
- Hot module replacement for
.sveltefiles - Hot reloading for changes to
routes.rband Rails view files. Seevite.config.tsfor details. - A Rails helper to allow for easy addition of
.sveltecomponents into.html.erbtemplates using<svelte-*>syntax. Seeapp/frontend/svelte/index.tsfor details. - TailwindCSS for styling
You will find Svelte components in app/frontend/svelte/. To add them to a Rails view (.html.erb file), see details in app/frontend/svelte/index.ts.
Example:
See app/views/home/index.html.erb:
<svelte-home data-props="<%= @data.to_json %>"></svelte-home>bundle install
yarnbundle exec rails s
bin/vite dev