Importmap Install Steps
shipped in matestack-ui-vuejs 3.1

Asset Path

config/initializers/assets.rb
1
Rails.application.config.assets.paths << Rails.root.join("app/matestack")
Copied!

Cache Sweeper Path

config/environments/development.rb
1
config.importmap.cache_sweepers << Rails.root.join("app/matestack")
Copied!

Assets Manifest

app/assets/config/manifest.js
1
// ...
2
//= link_tree ../../matestack .js
Copied!

Pins

Add the pins manually!
config/importmap.rb
1
# other pins...
2
pin "vue", to: "https://ga.jspm.io/npm:[email protected]/dist/vue.esm-browser.js" if Rails.env.development?
3
pin "vue", to: "https://ga.jspm.io/npm:[email protected]/dist/vue.esm-browser.prod.js" if Rails.env.production?
4
pin "matestack-ui-vuejs", to: "https://cdn.jsdelivr.net/npm/[email protected]/dist/matestack-ui-vuejs.esm.js" # jspm currently not working
5
6
# optional custom components
7
pin "some_other_component", to: "components/some_other_component.js" # do not prefix app/matestack!
8
pin "demo_component", to: "demo/demo_component.js" # do not prefix app/matestack!
Copied!

Usage

Import and setup 'matestack-ui-vuejs' in your app/javascript/packs/application.js
1
import { createApp } from 'vue'
2
import MatestackUiVueJs from 'matestack-ui-vuejs'
3
4
// optionally import custom components
5
import someOtherComponent from 'some_other_component' // import component definition from source
6
import demoComponent from 'demo_component' // import component definition from source
7
8
const appInstance = createApp({})
9
10
// optionally register custom components
11
appInstance.component('some-other-component', someOtherComponent) // register at appInstance
12
appInstance.component('demo-component', demoComponent) // register at appInstance
13
14
document.addEventListener('DOMContentLoaded', () => {
15
MatestackUiVueJs.mount(appInstance)
16
})
Copied!