Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mtgrosser/jass-vue-sfc
Vue SFC compiler for Sprockets
https://github.com/mtgrosser/jass-vue-sfc
asset-pipeline compiler javascript rails ruby ruby-on-rails sfc sprockets vue vue-sfc
Last synced: 5 days ago
JSON representation
Vue SFC compiler for Sprockets
- Host: GitHub
- URL: https://github.com/mtgrosser/jass-vue-sfc
- Owner: mtgrosser
- License: mit
- Created: 2021-09-15T11:59:24.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2022-06-01T10:06:55.000Z (over 2 years ago)
- Last Synced: 2024-10-17T09:49:37.607Z (21 days ago)
- Topics: asset-pipeline, compiler, javascript, rails, ruby, ruby-on-rails, sfc, sprockets, vue, vue-sfc
- Language: Ruby
- Homepage:
- Size: 48.8 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](http://badge.fury.io/rb/jass-vue-sfc)
[](https://github.com/mtgrosser/jass-vue-sfc/actions/workflows/build.yml)
# jass-vue-sfc - Vue 3 Single File Components for Rails
**`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!**
Vue SFCs are compiled to ES modules, which can be imported using [Import Maps](https://github.com/rails/importmap-rails) or regular `` tags.
## Why?
Modern browsers support native loading of ES modules using the `import` statement.
By leveraging Import Maps, modular JS applications can be built without having to integrate
a complicated JS build pipeline.
Framework-specific component formats like the Vue SFC format could not be used this way till now.
### Enter `jass-vue-sfc`!
`jass-vue-sfc` enables the asset pipeline to compile `.vue` files to ES modules,
allowing to build modular Vue applications in a clear and straightforward way,
without the need for invasive external build tools like Webpack.
During development, `jass-vue-sfc` will allow you to have fast reloading without the need
for "hot module replacement". When you change a component, just that component will be recompiled.
A JS dev server is no longer required. JS assets will be delivered by the normal Rails dev server.
## Installation
### Gemfile
```ruby
gem 'jass-vue-sfc'
```
### JS dependencies
Add `@vue/compiler-sfc` to your JS dependencies:
```sh
$ yarn add @vue/compiler-sfc
```
### Node.js
`Jass::Vue::SFC` depends on [Nodo](https://github.com/mtgrosser/nodo), which requires a working Node.js installation.
## Usage
Place your `.vue` components inside your regular `app/javascript` path.
In `app/javascript/components/HelloWorld.vue`:
```vue
<script>
export default {
data() {
return {
greeting: 'Hello World!'
}
}
}
{{ greeting }}
```
In your HTML code, load the component as a module:
```erb
<%= javascript_include_tag 'components/HelloWorld.js', module: true %>
```
Note the file extension is `.js`, not `.vue`. Sprockets will take care of
converting your `.vue` file into an ES module.
### Components with imports
If you want to use module `import`s within your components, pin them in your Rails importmap:
```
# config/importmap.rb
pin 'vue'
pin 'components/HelloWorld.vue', to: 'components/HelloWorld.js'
```
Then just use them in your component:
```vue
import Vue from 'vue';
import HelloWorld from 'components/HelloWorld.vue';
...
```
## ⚠️ Limitations
As of v1.0.3, the `rails-importmap` gem doesn't support globbing and reloading of JS modules with a file
extension other than `.js`, therefore a modified version is provided at [mtgrosser/importmap-rails](https://github.com/mtgrosser/importmap-rails).
To use the modified version of `importmap-rails`, add it to your `Gemfile`:
```ruby
gem "importmap-rails", ">= 1.0.0", github: "mtgrosser/importmap-rails", branch: "config-accept"
```
There is a [pull request](https://github.com/rails/importmap-rails/pull/57) which will resolve this issue when accepted.
Also, the following things are not (yet) supported:
- extracting the `` section of the SFC
- source maps
## Other Jass gems for the asset pipeline
💎 [Jass::Rollup](https://github.com/mtgrosser/jass-rollup) – Rollup.js support for Sprockets
💎 [Jass::Esbuild](https://github.com/mtgrosser/jass-esbuild) – esbuild support for Sprockets
💎 [Jass::React::JSX](https://github.com/mtgrosser/jass-react-jsx) – React JSX support for Sprockets