Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

maisnamraju's avatar

Adding vuex and vue-router to Spark v2

I have an application using laravel spark v2 and I want to slowly move to Vue2 and out of Laravel Spark altogether little by little as I am a lone person working on my project hence I don't have enough time. I want to move to the prescribed Vue SPA architecture and at this point in time i have a couple of components that I want to create using the Vue SPA philosophy.

In order to do this, I have managed to setup webpack and vue-router and get it working with the current Spark code but I now want to add vuex to the mix and am not sure how to do it.

Right now my main app.js code is fashioned in the manner below.

require('./spark-bootstrap');
require('./components/bootstrap');

Vue.config.debug = true;

window._                   = require('lodash');
window.moment      = require('moment');
window.lightbox    = require('lightbox2');

import introjs from 'intro.js';
import spark from 'spark';
import vueRouter from 'vue-router';
import store from './store';
import routerConfig from './router';

const router  = new vueRouter();


class SparkWrapper {
  static getVueRouterModule() {
    return Object.entries(spark).reduce(
      (collection, [key, value]) => {
        // explicitly convert 'data' and 'el' attributes to functions
        if (['data', 'el'].includes(key)) {
          collection[key] = () => value
        } else {
          // and keep everything else as it is
          collection[key] = value
        }

        return collection
    }, {})
  }
}

routerConfig(router);
router.start(SparkWrapper.getVueRouterModule(),'body');

I now want to add the store to work with the spark code but am not sure how. Any tips would be appreciated.

0 likes
0 replies

Please or to participate in this conversation.