Matestack Ui VueJs
AboutMatestack Ui CoreMatestack Ui VueJsMatestack Ui Bootstrap
  • Welcome
  • Migrating to 3.0
  • Back to 2.1 (via Core)
  • Getting started
    • Installation & Update
      • Webpacker Install Steps
      • Importmap Install Steps
      • JSBundling-Rails Install
    • Hello World
  • Built-in Reactivity
    • Emit Client Side Events
      • Onclick Component API
    • Toggle UI States
      • Toggle Component API
    • Call Server Side Actions
      • Action Component API
    • Reactive Forms
      • Overview
      • Form Component API
      • Input Component API
      • Textarea Component API
      • Checkbox Component API
      • Select Component API
      • Radio Component API
      • Nested Forms
    • Partial UI Updates
      • Overview
      • Async Component API
      • Cable Component API
      • Isolated Component API
    • Page Transitions
      • Transition Component API
    • Reactive Collections
      • Overview & API
  • Custom Reactivity
    • Custom Vue.js Components
    • Matestack's Vue.js APIs
    • Third party Vue.js Components
    • Third Party JavaScript
  • Integrations
    • Action Cable
    • Devise
  • Contribute
Powered by GitBook
On this page
  • Asset Path
  • Cache Sweeper Path
  • Assets Manifest
  • Pins
  • Usage
  1. Getting started
  2. Installation & Update

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:vue@3.2.31/dist/vue.esm-browser.js" if Rails.env.development?
pin "vue", to: "https://ga.jspm.io/npm:vue@3.2.31/dist/vue.esm-browser.prod.js" if Rails.env.production?
pin "matestack-ui-vuejs", to: "https://cdn.jsdelivr.net/npm/matestack-ui-vuejs@3.1.0/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)
})
PreviousWebpacker Install StepsNextJSBundling-Rails Install

Last updated 2 years ago