Migrate a Keestash App from jQuery to Vue.Js

Keestash Logo

Modular Keestash: Apps

Keestash Installation Process

App Webpack Config

module: {
rules: [
{
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /\.js$/,
loader: 'babel-loader'
},
{
test: /\.vue$/,
exclude: /node_modules/,
loader: ['vue-loader']
},
{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
},
],
},
]
},
const appModules = glob.sync("./apps/*/js/webpack.config.js");....const webpackConfig = [].concat(
baseModule
, toConfig(appModules, baseModule)
);
function toConfig(modules, baseModule) {
let conf = [];
for (let i = 0; i < modules.length; i++) {
const configPath = modules[i];
const config = require(configPath);
config.mode = baseModule.mode;
config.node = {fs: 'empty'};
config.module = Object.assign(baseModule.module, config.module || {});
config.resolve = Object.assign(baseModule.resolve, config.resolve || {});
conf.push(config);
}
return conf;
}
module.exports = webpackConfig;

Vue.Js integration

import App from "./InstallInstance/App";
import BootstrapVue from "bootstrap-vue";
import Vue from 'vue';
import store from "../../../../lib/js/src/Store/store";
window.addEventListener(
'DOMContentLoaded'
, bootstrap
);
function bootstrap() {
const vueConfig = {
store,
render: h => h(App)
};
Vue.use(BootstrapVue);
new Vue(vueConfig)
.$mount("#install_instance_app");
}

Further Work

Software Engineer, Algorithms and Data Structures, Machine Learning, Open Source Contributor, Hobby Photographer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store