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
  1. Getting started
  2. Installation & Update

Webpacker Install Steps

Webpacker > 5.x

Add 'matestack-ui-vuejs' to your package.json by adding:

{
  "name": "my-app",
  "dependencies": {
    "matestack-ui-vuejs": "^3.1.0", // <-- new package name
    "..."
  }
}

This adds the npm package that provides the JavaScript corresponding to the matestack-ui-vuejs Ruby gem. Make sure that the npm package version matches the gem version. To find out what gem version you are using, you may use bundle info matestack-ui-vuejs.

Note:

  • vue3 dropped IE 11 support

  • when using babel alongside webpacker, please adjust your package.json or .browserslistrc config in order to exclude IE 11 support:

{
  "name": "my-app",
  "...": { },
  "browserslist": [
    "defaults",
    "not IE 11" // <-- important!
  ]
}

Otherwise you may encounter issues around regeneratorRuntime (especially when using Vuex)

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

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

const appInstance = createApp({})

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

and properly configure webpack:

config/webpack/environment.js

const { environment } = require('@rails/webpacker')
const webpack = require('webpack');

const customWebpackConfig = {
  resolve: {
    alias: {
      vue: 'vue/dist/vue.esm-bundler',
      'matestack-ui-vuejs': 'matestack-ui-vuejs/lib/matestack/ui/vue_js/index.js' // in order not to use the esm package
    }
  },
  plugins: [
    new webpack.DefinePlugin({
      __VUE_OPTIONS_API__: true,
      __VUE_PROD_DEVTOOLS__: false
    })
  ]
}

environment.config.merge(customWebpackConfig)

module.exports = environment

(don't forget to restart webpacker when changing this file!)

and then finally compile the JavaScript code with webpack:

$ bin/webpack --watch

When you update the matestack-ui-vuejs Ruby gem, make sure to update the npm package as well!

PreviousInstallation & UpdateNextImportmap Install Steps

Last updated 3 years ago