Importmap Install Steps

shipped in matestack-ui-vuejs 3.1

Asset Path

config/initializers/assets.rb

Rails.application.config.assets.paths << Rails.root.join("app/matestack")

Cache Sweeper Path

config/environments/development.rb

config.importmap.cache_sweepers << Rails.root.join("app/matestack")

Assets Manifest

app/assets/config/manifest.js

// ...
//= link_tree ../../matestack .js

Pins

Add the pins manually!

config/importmap.rb

# other pins...
pin "vue", to: "https://ga.jspm.io/npm:[email protected]/dist/vue.esm-browser.js" if Rails.env.development?
pin "vue", to: "https://ga.jspm.io/npm:[email protected]/dist/vue.esm-browser.prod.js" if Rails.env.production?
pin "matestack-ui-vuejs", to: "https://cdn.jsdelivr.net/npm/[email protected]/dist/matestack-ui-vuejs.esm.js" # jspm currently not working

# optional custom components
pin "some_other_component", to: "components/some_other_component.js" # do not prefix app/matestack!
pin "demo_component", to: "demo/demo_component.js" # do not prefix app/matestack!

Usage

Import and setup 'matestack-ui-vuejs' in your app/javascript/packs/application.js

import { createApp } from 'vue'
import MatestackUiVueJs from 'matestack-ui-vuejs'

// optionally import custom components
import someOtherComponent from 'some_other_component' // import component definition from source
import demoComponent from 'demo_component' // import component definition from source

const appInstance = createApp({})

// optionally register custom components
appInstance.component('some-other-component', someOtherComponent) // register at appInstance
appInstance.component('demo-component', demoComponent) // register at appInstance

document.addEventListener('DOMContentLoaded', () => {
  MatestackUiVueJs.mount(appInstance)
})