How to send data from PHP to Vue.js?

Use the method Media::addJsDef([]) to make your data available in the window context. If other modules can be present on the same, prefix your names with the module name to avoid name collision.

This is a convenient way to send the links Vue.js could call, generated by the router.

Example:

    Media::addJsDef([
        'myVueJsModuleRouteToSomeAction' => $this->context->link->getAdminLink(
            'AdminAjaxMyVueJsModule',
            true,
            [],
            [
                'action' => 'RouteToSomeAction',
                'ajax' => 1,
            ]
        ),
    ]);

How to run several Vue.js applications on the same page

The only thing to consider is the div ID you want to hook your application on.

By default, Vue.js creates your application with a <div id="app"></div>. To avoid it colliding with other applications or modules, replace references to this ID in the template and JS development files with something more specific.

For instance, app => yourModuleNameApp.

I want to add another version of Bootstrap / PrestaShop UI-Kit of my application in the Back-office, how to avoid conflicts with the one provided by PrestaShop?

Bootstrap needs to be disabled on the module content. To do so:

  • Set the bootstrap property of the module as false
  • Load this piece of CSS for users with multi shop:
<style>
  /** Hide native multistore module activation panel, because of visual regressions on non-bootstrap content */
  #content.nobootstrap div.bootstrap.panel {
    display: none;
  }
</style>