Webpacker Install Steps

About Matestack Ui Core Matestack Ui VueJs Matestack Ui Bootstrap

Search…

Webpacker > 5.x

Add 'matestack-ui-vuejs' to your package.json by adding:
1
{
2
  "name": "my-app",
3
  "dependencies": {
4
    "matestack-ui-vuejs": "^3.1.0", // <-- new package name
5
    "..."
6
  }
7
}
Copied!
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:
1
{
2
  "name": "my-app",
3
  "...": { },
4
  "browserslist": [
5
    "defaults",
6
    "not IE 11" // <-- important!
7
  ]
8
}
Copied!
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
1
import { createApp } from 'vue'
2
import MatestackUiVueJs from 'matestack-ui-vuejs'
3
​
4
const appInstance = createApp({})
5
​
6
document.addEventListener('DOMContentLoaded', () => {
7
  MatestackUiVueJs.mount(appInstance)
8
})
Copied!
and properly configure webpack:
config/webpack/environment.js
1
const { environment } = require('@rails/webpacker')
2
const webpack = require('webpack');
3
​
4
const customWebpackConfig = {
5
  resolve: {
6
    alias: {
7
      vue: 'vue/dist/vue.esm-bundler',
8
      'matestack-ui-vuejs': 'matestack-ui-vuejs/lib/matestack/ui/vue_js/index.js' // in order not to use the esm package
9
    }
10
  },
11
  plugins: [
12
    new webpack.DefinePlugin({
13
      __VUE_OPTIONS_API__: true,
14
      __VUE_PROD_DEVTOOLS__: false
15
    })
16
  ]
17
}
18
​
19
environment.config.merge(customWebpackConfig)
20
​
21
module.exports = environment
Copied!
(don't forget to restart webpacker when changing this file!)
and then finally compile the JavaScript code with webpack:
1
$ bin/webpack --watch
Copied!
When you update the matestack-ui-vuejs Ruby gem, make sure to update the npm package as well!

Getting started - Previous

Installation & Update

Importmap Install Steps

Last modified 1mo ago

Copy link