{"id":14956016,"url":"https://github.com/mtgrosser/jass-vue-sfc","last_synced_at":"2026-01-28T00:21:07.391Z","repository":{"id":56878375,"uuid":"406744722","full_name":"mtgrosser/jass-vue-sfc","owner":"mtgrosser","description":"Vue SFC compiler for Sprockets","archived":false,"fork":false,"pushed_at":"2022-06-01T10:06:55.000Z","size":50,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-12-20T11:27:01.026Z","etag":null,"topics":["asset-pipeline","compiler","javascript","rails","ruby","ruby-on-rails","sfc","sprockets","vue","vue-sfc"],"latest_commit_sha":null,"homepage":"","language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mtgrosser.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-09-15T11:59:24.000Z","updated_at":"2022-05-10T05:26:48.000Z","dependencies_parsed_at":"2022-08-20T23:10:15.123Z","dependency_job_id":null,"html_url":"https://github.com/mtgrosser/jass-vue-sfc","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mtgrosser/jass-vue-sfc","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mtgrosser%2Fjass-vue-sfc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mtgrosser%2Fjass-vue-sfc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mtgrosser%2Fjass-vue-sfc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mtgrosser%2Fjass-vue-sfc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mtgrosser","download_url":"https://codeload.github.com/mtgrosser/jass-vue-sfc/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mtgrosser%2Fjass-vue-sfc/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28828658,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-27T23:29:49.665Z","status":"ssl_error","status_checked_at":"2026-01-27T23:25:58.379Z","response_time":168,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["asset-pipeline","compiler","javascript","rails","ruby","ruby-on-rails","sfc","sprockets","vue","vue-sfc"],"created_at":"2024-09-24T13:12:11.112Z","updated_at":"2026-01-28T00:21:07.371Z","avatar_url":"https://github.com/mtgrosser.png","language":"Ruby","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Gem Version](https://badge.fury.io/rb/jass-vue-sfc.svg)](http://badge.fury.io/rb/jass-vue-sfc)\n[![build](https://github.com/mtgrosser/jass-vue-sfc/actions/workflows/build.yml/badge.svg)](https://github.com/mtgrosser/jass-vue-sfc/actions/workflows/build.yml)\n\n# jass-vue-sfc - Vue 3 Single File Components for Rails\n\n**`jass-vue-sfc` provides [Vue Single File Component](https://v3.vuejs.org/guide/single-file-component.html) support for Sprockets and the Rails asset pipeline. No Webpack required!**\n \nVue SFCs are compiled to ES modules, which can be imported using [Import Maps](https://github.com/rails/importmap-rails) or regular `\u003cscript module\u003e` tags.\n\n## Why?\n\nModern browsers support native loading of ES modules using the `import` statement.\nBy leveraging Import Maps, modular JS applications can be built without having to integrate\na complicated JS build pipeline.\n\nFramework-specific component formats like the Vue SFC format could not be used this way till now.\n\n### Enter `jass-vue-sfc`!\n\n`jass-vue-sfc` enables the asset pipeline to compile `.vue` files to ES modules,\nallowing to build modular Vue applications in a clear and straightforward way,\nwithout the need for invasive external build tools like Webpack.\n\nDuring development, `jass-vue-sfc` will allow you to have fast reloading without the need\nfor \"hot module replacement\". When you change a component, just that component will be recompiled.\n\nA JS dev server is no longer required. JS assets will be delivered by the normal Rails dev server.\n\n## Installation\n\n### Gemfile\n```ruby\ngem 'jass-vue-sfc'\n```\n\n### JS dependencies\nAdd `@vue/compiler-sfc` to your JS dependencies:\n```sh\n$ yarn add @vue/compiler-sfc\n```\n\n### Node.js\n\n`Jass::Vue::SFC` depends on [Nodo](https://github.com/mtgrosser/nodo), which requires a working Node.js installation.\n\n## Usage\n\nPlace your `.vue` components inside your regular `app/javascript` path.\n\nIn `app/javascript/components/HelloWorld.vue`:\n\n```vue\n\u003cscript\u003e\nexport default {\n  data() {\n    return {\n      greeting: 'Hello World!'\n    }\n  }\n}\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cp class=\"greeting\"\u003e{{ greeting }}\u003c/p\u003e\n\u003c/template\u003e\n```\n\nIn your HTML code, load the component as a module:\n\n```erb\n\u003c%= javascript_include_tag 'components/HelloWorld.js', module: true %\u003e\n```\n\nNote the file extension is `.js`, not `.vue`. Sprockets will take care of\nconverting your `.vue` file into an ES module.\n\n\n### Components with imports\n\nIf you want to use module `import`s within your components, pin them in your Rails importmap:\n\n```\n# config/importmap.rb\npin 'vue'\npin 'components/HelloWorld.vue', to: 'components/HelloWorld.js'\n```\n\nThen just use them in your component:\n\n```vue\n\u003cscript\u003e\nimport Vue from 'vue';\nimport HelloWorld from 'components/HelloWorld.vue';\n...\n\u003c/script\u003e\n```\n\n## ⚠️ Limitations\n\nAs of v1.0.3, the `rails-importmap` gem doesn't support globbing and reloading of JS modules with a file\nextension other than `.js`, therefore a modified version is provided at [mtgrosser/importmap-rails](https://github.com/mtgrosser/importmap-rails).\n\nTo use the modified version of `importmap-rails`, add it to your `Gemfile`:\n\n```ruby\ngem \"importmap-rails\", \"\u003e= 1.0.0\", github: \"mtgrosser/importmap-rails\", branch: \"config-accept\"\n```\n\nThere is a [pull request](https://github.com/rails/importmap-rails/pull/57) which will resolve this issue when accepted.\n\nAlso, the following things are not (yet) supported:\n\n- extracting the `\u003cstyle\u003e` section of the SFC\n- source maps\n\n## Other Jass gems for the asset pipeline\n\n💎 [Jass::Rollup](https://github.com/mtgrosser/jass-rollup) – Rollup.js support for Sprockets\n\n💎 [Jass::Esbuild](https://github.com/mtgrosser/jass-esbuild) – esbuild support for Sprockets\n\n💎 [Jass::React::JSX](https://github.com/mtgrosser/jass-react-jsx) – React JSX support for Sprockets\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmtgrosser%2Fjass-vue-sfc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmtgrosser%2Fjass-vue-sfc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmtgrosser%2Fjass-vue-sfc/lists"}